*, ::after, ::before { box-sizing: border-box; } body.fp-viewing-Zeta-id .loaded #mouse a:hover { opacity: 1; } body.fp-viewing-Zeta-id .loaded #mouse { transition-delay: 1.5s; opacity: 1; } body.fp-viewing-Zeta-id .loaded #mouse a { opacity: 0.5; } body.fp-viewing-EKO #mouse img, body.fp-viewing-Sentry #mouse img, body.fp-viewing-FlieBen #mouse img, body.fp-viewing-Magma #mouse img, body.fp-viewing-Qlic #mouse img { width: 20px; transform: translateY(17px); } #mouse .dark, body.fp-viewing-EKO #mouse .light, body.fp-viewing-FlieBen #mouse .light, body.fp-viewing-Magma #mouse .light, body.fp-viewing-Qlic #mouse .light, body.fp-viewing-OurProcess #mouse .light { display: inherit; } #mouse .light, body.fp-viewing-EKO #mouse .dark, body.fp-viewing-FlieBen #mouse .dark, body.fp-viewing-Magma #mouse .dark, body.fp-viewing-Qlic #mouse .dark, body.fp-viewing-OurProcess #mouse .dark, body.fp-viewing-ContactUs #mouse .dark, body.fp-viewing-ContactUs #mouse .light { display: none; } /* MENU */ /* BG * --------------------------------------- */ body.fp-viewing-Zeta-id, body.fp-viewing-WeDoIndustrialDesign, body.fp-viewing-Sentry, body.fp-viewing-OurValues { background: #fff; } body.fp-viewing-Zeta-id #headerLogo, body.fp-viewing-WeDoIndustrialDesign #headerLogo, body.fp-viewing-Sentry #headerLogo, body.fp-viewing-OurValues #headerLogo, body.fp-viewing-OurTeam #headerLogo { opacity: 1; visibility: visible; transition-delay: 0.35s; } body.fp-viewing-Zeta-id #headerLogo-white, body.fp-viewing-WeDoIndustrialDesign #headerLogo-white, body.fp-viewing-Sentry #headerLogo-white, body.fp-viewing-OurValues #headerLogo-white, body.fp-viewing-OurTeam #headerLogo-white { opacity: 0; visibility: hidden; transition-delay: 0s; } body.fp-viewing-EKO, body.fp-viewing-FlieBen, body.fp-viewing-Magma, body.fp-viewing-Qlic, body.fbody.p-viewing-OurProcess, body.fp-viewing-OurProcess, body.fp-viewing-ContactUs { background: #000; } body.fp-viewing-OurTeam { background: #f7f7f7; } #fp-home.toggleOFF { filter: grayscale(1) blur(20px); } /* Side Menu - Home * --------------------------------------- */ body.fp-viewing-WeDoIndustrialDesign #menu #sideMenu:hover ul li:nth-child(1) a p, body.fp-viewing-WeDoIndustrialDesign #menu #sideMenu.toggleON ul:nth-child(1) li a p, body.fp-viewing-EKO #menu #sideMenu:hover ul li:nth-child(2) a p, body.fp-viewing-EKO #menu #sideMenu.toggleON ul:nth-child(2) li a p, body.fp-viewing-EKO #menu #sideMenu:hover ul li:nth-child(3) a p, body.fp-viewing-EKO #menu #sideMenu.toggleON ul:nth-child(3) li a p, body.fp-viewing-Sentry #menu #sideMenu:hover ul li:nth-child(2) a p, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul:nth-child(2) li a p, body.fp-viewing-Sentry #menu #sideMenu:hover ul li:nth-child(4) a p, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul:nth-child(4) li a p, body.fp-viewing-FlieBen #menu #sideMenu:hover ul li:nth-child(2) a p, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul:nth-child(2) li a p, body.fp-viewing-FlieBen #menu #sideMenu:hover ul li:nth-child(5) a p, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul:nth-child(5) li a p, body.fp-viewing-Magma #menu #sideMenu:hover ul li:nth-child(2) a p, body.fp-viewing-Magma #menu #sideMenu.toggleON ul:nth-child(2) li a p, body.fp-viewing-Magma #menu #sideMenu:hover ul li:nth-child(6) a p, body.fp-viewing-Magma #menu #sideMenu.toggleON ul:nth-child(6) li a p, body.fp-viewing-Qlic #menu #sideMenu:hover ul li:nth-child(2) a p, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul:nth-child(2) li a p, body.fp-viewing-Qlic #menu #sideMenu:hover ul li:nth-child(7) a p, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul:nth-child(7) li a p, body.fp-viewing-OurValues #menu #sideMenu:hover ul li:nth-child(8) a p, body.fp-viewing-OurValues #menu #sideMenu.toggleON ul:nth-child(8) li a p, body.fp-viewing-OurProcess #menu #sideMenu:hover ul li:nth-child(9) a p, body.fp-viewing-OurProcess #menu #sideMenu.toggleON ul:nth-child(9) li a p, body.fp-viewing-OurTeam #menu #sideMenu:hover ul li:nth-child(10) a p, body.fp-viewing-OurTeam #menu #sideMenu.toggleON ul:nth-child(10) li a p, body.fp-viewing-ContactUs #menu #sideMenu:hover ul li:nth-child(11) a p, body.fp-viewing-ContactUs #menu #sideMenu.toggleON ul:nth-child(11) li a p { opacity: 1; } body.fp-viewing-ContactUs #menu #sideMenu { right: -80px; } body.fp-viewing-EKO #menu #sideMenu, body.fp-viewing-FlieBen #menu #sideMenu, body.fp-viewing-Magma #menu #sideMenu, body.fp-viewing-Qlic #menu #sideMenu, body.fp-viewing-OurProcess #menu #sideMenu, body.fp-viewing-ContactUs #menu #sideMenu { background: rgba(0, 0, 0, 0); } body.fp-viewing-EKO #menu #sideMenu:hover, body.fp-viewing-FlieBen #menu #sideMenu:hover, body.fp-viewing-Magma #menu #sideMenu:hover, body.fp-viewing-Qlic #menu #sideMenu:hover, body.fp-viewing-OurProcess #menu #sideMenu:hover, body.fp-viewing-ContactUs #menu #sideMenu:hover, body.fp-viewing-EKO #menu #sideMenu.toggleON, body.fp-viewing-FlieBen #menu #sideMenu.toggleON, body.fp-viewing-Magma #menu #sideMenu.toggleON, body.fp-viewing-Qlic #menu #sideMenu.toggleON, body.fp-viewing-OurProcess #menu #sideMenu.toggleON, body.fp-viewing-ContactUs #menu #sideMenu.toggleON { background: rgba(0, 0, 0, 0.2); } body.fp-viewing-EKO #menu #sideMenu ul li#liEKO, body.fp-viewing-Sentry #menu #sideMenu ul li#liEKO, body.fp-viewing-FlieBen #menu #sideMenu ul li#liEKO, body.fp-viewing-Magma #menu #sideMenu ul li#liEKO, body.fp-viewing-Qlic #menu #sideMenu ul li#liEKO, body.fp-viewing-EKO #menu #sideMenu ul li#liSentry, body.fp-viewing-Sentry #menu #sideMenu ul li#liSentry, body.fp-viewing-FlieBen #menu #sideMenu ul li#liSentry, body.fp-viewing-Magma #menu #sideMenu ul li#liSentry, body.fp-viewing-Qlic #menu #sideMenu ul li#liSentry, body.fp-viewing-EKO #menu #sideMenu ul li#liFlieBen, body.fp-viewing-Sentry #menu #sideMenu ul li#liFlieBen, body.fp-viewing-FlieBen #menu #sideMenu ul li#liFlieBen, body.fp-viewing-Magma #menu #sideMenu ul li#liFlieBen, body.fp-viewing-Qlic #menu #sideMenu ul li#liFlieBen, body.fp-viewing-EKO #menu #sideMenu ul li#liMagma, body.fp-viewing-Sentry #menu #sideMenu ul li#liMagma, body.fp-viewing-FlieBen #menu #sideMenu ul li#liMagma, body.fp-viewing-Magma #menu #sideMenu ul li#liMagma, body.fp-viewing-Qlic #menu #sideMenu ul li#liMagma, body.fp-viewing-EKO #menu #sideMenu ul li#liQlic, body.fp-viewing-Sentry #menu #sideMenu ul li#liQlic, body.fp-viewing-FlieBen #menu #sideMenu ul li#liQlic, body.fp-viewing-Magma #menu #sideMenu ul li#liQlic, body.fp-viewing-Qlic #menu #sideMenu ul li#liQlic { margin: 0; opacity: 0.4; } body.fp-viewing-EKO #menu #sideMenu:hover ul li#liEKO, body.fp-viewing-Sentry #menu #sideMenu:hover ul li#liEKO, body.fp-viewing-FlieBen #menu #sideMenu:hover ul li#liEKO, body.fp-viewing-Magma #menu #sideMenu:hover ul li#liEKO, body.fp-viewing-Qlic #menu #sideMenu:hover ul li#liEKO, body.fp-viewing-EKO #menu #sideMenu.toggleON ul li#liEKO, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul li#liEKO, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul li#liEKO, body.fp-viewing-Magma #menu #sideMenu.toggleON ul li#liEKO, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul li#liEKO, body.fp-viewing-EKO #menu #sideMenu:hover ul li#liSentry, body.fp-viewing-Sentry #menu #sideMenu:hover ul li#liSentry, body.fp-viewing-FlieBen #menu #sideMenu:hover ul li#liSentry, body.fp-viewing-Magma #menu #sideMenu:hover ul li#liSentry, body.fp-viewing-Qlic #menu #sideMenu:hover ul li#liSentry, body.fp-viewing-EKO #menu #sideMenu:hover ul li#liFlieBen, body.fp-viewing-Sentry #menu #sideMenu:hover ul li#liFlieBen, body.fp-viewing-FlieBen #menu #sideMenu:hover ul li#liFlieBen, body.fp-viewing-Magma #menu #sideMenu:hover ul li#liFlieBen, body.fp-viewing-Qlic #menu #sideMenu:hover ul li#liFlieBen, body.fp-viewing-EKO #menu #sideMenu.toggleON ul li#liSentry, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul li#liSentry, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul li#liSentry, body.fp-viewing-Magma #menu #sideMenu.toggleON ul li#liSentry, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul li#liSentry, body.fp-viewing-EKO #menu #sideMenu.toggleON ul li#liFlieBen, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul li#liFlieBen, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul li#liFlieBen, body.fp-viewing-Magma #menu #sideMenu.toggleON ul li#liFlieBen, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul li#liFlieBen, body.fp-viewing-EKO #menu #sideMenu:hover ul li#liMagma, body.fp-viewing-Sentry #menu #sideMenu:hover ul li#liMagma, body.fp-viewing-FlieBen #menu #sideMenu:hover ul li#liMagma, body.fp-viewing-Magma #menu #sideMenu:hover ul li#liMagma, body.fp-viewing-Qlic #menu #sideMenu:hover ul li#liMagma, body.fp-viewing-EKO #menu #sideMenu.toggleON ul li#liMagma, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul li#liMagma, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul li#liMagma, body.fp-viewing-Magma #menu #sideMenu.toggleON ul li#liMagma, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul li#liMagma { margin: 4px 0 0; opacity: 1; } body.fp-viewing-EKO #menu #sideMenu:hover ul li#liQlic, body.fp-viewing-Sentry #menu #sideMenu:hover ul li#liQlic, body.fp-viewing-FlieBen #menu #sideMenu:hover ul li#liQlic, body.fp-viewing-Magma #menu #sideMenu:hover ul li#liQlic, body.fp-viewing-Qlic #menu #sideMenu:hover ul li#liQlic, body.fp-viewing-EKO #menu #sideMenu.toggleON ul li#liQlic, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul li#liQlic, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul li#liQlic, body.fp-viewing-Magma #menu #sideMenu.toggleON ul li#liQlic, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul li#liQlic { margin: 4px 0 5px; opacity: 1; } body.fp-viewing-EKO #menu #sideMenu #ig p, body.fp-viewing-EKO #menu #sideMenu #ig i, body.fp-viewing-FlieBen #menu #sideMenu #ig p, body.fp-viewing-FlieBen #menu #sideMenu #ig i, body.fp-viewing-Magma #menu #sideMenu #ig p, body.fp-viewing-Magma #menu #sideMenu #ig i, body.fp-viewing-Qlic #menu #sideMenu #ig p, body.fp-viewing-Qlic #menu #sideMenu #ig i, body.fp-viewing-OurProcess #menu #sideMenu #ig p, body.fp-viewing-OurProcess #menu #sideMenu #ig i, body.fp-viewing-ContactUs #menu #sideMenu #ig p, body.fp-viewing-ContactUs #menu #sideMenu #ig i, body.fp-viewing-EKO #menu #sideMenu ul li a p, body.fp-viewing-FlieBen #menu #sideMenu ul li a p, body.fp-viewing-Magma #menu #sideMenu ul li a p, body.fp-viewing-Qlic #menu #sideMenu ul li a p, body.fp-viewing-OurProcess #menu #sideMenu ul li a p, body.fp-viewing-ContactUs #menu #sideMenu ul li a p { color: #fff; } body.fp-viewing-EKO #menu #sideMenu ul li:nth-child(3) a:hover { opacity: 1; } body.fp-viewing-EKO #menu #sideMenu ul li:nth-child(3) a p { color: #9a71ff; } body.fp-viewing-Sentry #menu #sideMenu ul li:nth-child(4) a:hover { opacity: 1; } body.fp-viewing-Sentry #menu #sideMenu ul li:nth-child(4) a p { color: #4cd8bd; } body.fp-viewing-FlieBen #menu #sideMenu ul li:nth-child(5) a:hover { opacity: 1; } body.fp-viewing-FlieBen #menu #sideMenu ul li:nth-child(5) a p { color: #5ae0ff; } body.fp-viewing-Magma #menu #sideMenu ul li:nth-child(6) a:hover { opacity: 1; } body.fp-viewing-Magma #menu #sideMenu ul li:nth-child(6) a p { color: #ffab8d; } body.fp-viewing-Qlic #menu #sideMenu ul li:nth-child(7) a:hover { opacity: 1; } body.fp-viewing-Qlic #menu #sideMenu ul li:nth-child(7) a p { color: #fc3000; } body.fp-viewing-fp-viewing-WeDoIndustrialDesign #menu #sideMenu ul li:nth-child(1) a span span, body.fp-viewing-EKO #menu #sideMenu ul li:nth-child(2) a span span, body.fp-viewing-Sentry #menu #sideMenu ul li:nth-child(2) a span span, body.fp-viewing-FlieBen #menu #sideMenu ul li:nth-child(2) a span span, body.fp-viewing-Magma #menu #sideMenu ul li:nth-child(2) a span span, body.fp-viewing-Qlic #menu #sideMenu ul li:nth-child(2) a span span, body.fp-viewing-OurValues #menu #sideMenu ul li:nth-child(8) a span span, body.fp-viewing-OurProcess #menu #sideMenu ul li:nth-child(9) a span span, body.fp-viewing-OurTeam #menu #sideMenu ul li:nth-child(10) a span span, body.fp-viewing-ContactUs #menu #sideMenu ul li:nth-child(11) a span span { width: 10px; height: 10px; } body.fp-viewing-EKO #menu #sideMenu ul li:nth-child(3) a span span, body.fp-viewing-Sentry #menu #sideMenu ul li:nth-child(4) a span span, body.fp-viewing-FlieBen #menu #sideMenu ul li:nth-child(5) a span span, body.fp-viewing-Magma #menu #sideMenu ul li:nth-child(6) a span span, body.fp-viewing-Qlic #menu #sideMenu ul li:nth-child(7) a span span { width: 8px; height: 8px; background: rgba(255, 255, 255, 0); border: 2px solid #fff; } body.fp-viewing-Sentry #menu #sideMenu ul li:nth-child(4) a span span { border: 2px solid #000; } body.fp-viewing-EKO #menu #sideMenu:hover ul li:nth-child(3) a span span, body.fp-viewing-FlieBen #menu #sideMenu:hover ul li:nth-child(5) a span span, body.fp-viewing-Magma #menu #sideMenu:hover ul li:nth-child(6) a span span, body.fp-viewing-Qlic #menu #sideMenu:hover ul li:nth-child(7) a span span, body.fp-viewing-EKO #menu #sideMenu.toggleON ul li:nth-child(3) a span span, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul li:nth-child(5) a span span, body.fp-viewing-Magma #menu #sideMenu.toggleON ul li:nth-child(6) a span span, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul li:nth-child(7) a span span { background: rgba(255, 255, 255, 0); transition: all 0.2s ease-in-out; border: 2px solid #fff; } body.fp-viewing-Sentry #menu #sideMenu:hover ul li:nth-child(4) a span span, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul li:nth-child(4) a span span { background: rgba(0, 0, 0, 0); transition: all 0.2s ease-in-out; border: 2px solid #000; } body.fp-viewing-WeDoIndustrialDesign #menu #sideMenu ul li a span span, body.fp-viewing-Sentry #menu #sideMenu ul li a span span, body.fp-viewing-OurValues #menu #sideMenu ul li a span span, body.fp-viewing-OurTeam #menu #sideMenu ul li a span span { background: rgba(0, 0, 0, 1); transition: all 0.2s ease-in-out; border: 2px solid #000; } body.fp-viewing-EKO #menu #sideMenu ul li a span span, body.fp-viewing-FlieBen #menu #sideMenu ul li a span span, body.fp-viewing-Magma #menu #sideMenu ul li a span span, body.fp-viewing-Qlic #menu #sideMenu ul li a span span, body.fp-viewing-OurProcess #menu #sideMenu ul li a span span, body.fp-viewing-ContactUs #menu #sideMenu ul li a span span { background: rgba(255, 255, 255, 1); transition: all 0.2s ease-in-out; border: 2px solid #fff; } body.fp-viewing-EKO #menu #sideMenu:hover ul li:nth-child(3) a span span, body.fp-viewing-EKO #menu #sideMenu.toggleON ul li:nth-child(3) a span span { background: rgba(255, 255, 255, 0); transition: all 0.2s ease-in-out; border: 2px solid #fff; } body.fp-viewing-Sentry #menu #sideMenu:hover ul li:nth-child(4) a span span, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul li:nth-child(4) a span span { background: rgba(255, 255, 255, 0); transition: all 0.2s ease-in-out; border: 2px solid #fff; } body.fp-viewing-FlieBen #menu #sideMenu:hover ul li:nth-child(5) a span span, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul li:nth-child(5) a span span { background: rgba(255, 255, 255, 0); transition: all 0.2s ease-in-out; border: 2px solid #fff; } body.fp-viewing-Magma #menu #sideMenu:hover ul li:nth-child(6) a span span, body.fp-viewing-Magma #menu #sideMenu.toggleON ul li:nth-child(6) a span span { background: rgba(255, 255, 255, 0); transition: all 0.2s ease-in-out; border: 2px solid #fff; } body.fp-viewing-Qlic #menu #sideMenu:hover ul li:nth-child(7) a span span, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul li:nth-child(7) a span span { background: rgba(255, 255, 255, 0); transition: all 0.2s ease-in-out; border: 2px solid #fff; } body.fp-viewing-EKO #menu #sideMenu:hover ul li:nth-child(3) a span span, body.fp-viewing-EKO #menu #sideMenu.toggleON ul li:nth-child(3) a span span { background: rgba(255, 255, 255, 0); transition: all 0.2s ease-in-out; border-color: #9a71ff; } body.fp-viewing-Sentry #menu #sideMenu:hover ul li:nth-child(4) a span span, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul li:nth-child(4) a span span { background: rgba(255, 255, 255, 0); transition: all 0.2s ease-in-out; border-color: #4cd8bd; } body.fp-viewing-FlieBen #menu #sideMenu:hover ul li:nth-child(5) a span span, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul li:nth-child(5) a span span { background: rgba(255, 255, 255, 0); transition: all 0.2s ease-in-out; border-color: #5ae0ff; } body.fp-viewing-Magma #menu #sideMenu:hover ul li:nth-child(6) a span span, body.fp-viewing-Magma #menu #sideMenu.toggleON ul li:nth-child(6) a span span { background: rgba(255, 255, 255, 0); transition: all 0.2s ease-in-out; border-color: #ffab8d; } body.fp-viewing-Qlic #menu #sideMenu:hover ul li:nth-child(7) a span span, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul li:nth-child(7) a span span { background: rgba(255, 255, 255, 0); transition: all 0.2s ease-in-out; border-color: #fc3000; } body.fp-viewing-Zeta-id #menu #sideMenu, body.fp-viewing-Zeta-id #menu #sideMenu #logoMain { opacity: 0; right: -80px; } body.fp-viewing-WeDoIndustrialDesign #menu #sideMenu #headerLogo, body.fp-viewing-Sentry #menu #sideMenu #headerLogo, body.fp-viewing-OurValues #menu #sideMenu #headerLogo, body.fp-viewing-OurTeam #menu #sideMenu #headerLogo { visibility: visible; opacity: 1; transition: opacity 0.2s linear; transition-delay: 0.2s; } body.fp-viewing-EKO #menu #sideMenu #headerLogo-white, body.fp-viewing-FlieBen #menu #sideMenu #headerLogo-white, body.fp-viewing-Magma #menu #sideMenu #headerLogo-white, body.fp-viewing-Qlic #menu #sideMenu #headerLogo-white, body.fp-viewing-OurProcess #menu #sideMenu #headerLogo-white { visibility: visible; opacity: 1; transition: opacity 0.5s linear; transition-delay: 0.2s; } #langSwitch .checkLayer { background-color: rgba(195, 175, 128, 0) !important; } #langSwitch:hover .checkLayer { background-color: rgba(195, 175, 128, 1) !important; } /* Secciones * --------------------------------------- */ .fp-section { position: fixed; text-align: center; } .section.fp-section { text-align: center; border-bottom: 1px solid transparent; } #sectionFlieben.fp-section, #sectionTheTeamPhoto.fp-section { border-bottom: 1px solid #000; } #sectionTheTeamPhoto .fp-bg { background-image: url('../img/estudio.jpg'); background-size: cover; background-position: center center; } .section .homeSection { margin: 0 auto; opacity: 0; width: 100%; transition: all 2.3s ease-in-out; } .section.active .homeSection { opacity: 1; transition: all 2s ease-in-out; } .homeSection p { margin-top: 7px; } #sectionEko, #sectionFlieben, #sectionMagma { background: #000 !important; } #sectionEko #eko-home img, #sectionSentry #sentry-home img, #sectionFlieben #flieben-home img, #sectionMagma #magma-home img, #sectionQlic #qlic-home img { opacity: 0; width: 35vw !important; height: auto; transition: all 2s ease-in-out; } #sectionQlic #qlic-home img { width: 26vw !important; } #sectionEko.active #eko-home img, #sectionSentry.active #sentry-home img, #sectionFlieben.active #flieben-home img, #sectionMagma.active #magma-home img, #sectionQlic.active #qlic-home img { opacity: 1; width: 50vh !important; transition: all 1s ease-in-out; } #sectionQlic.active #qlic-home img { width: 16vw !important; } .fp-bg { display: table; background-size: cover; transform: translate3d(0, 0, 0); backface-visibility: hidden; } /* Botones home * --------------------------------------- */ .homeProject a { bottom: 9vh; position: absolute; /* cursor: pointer; */ } .homeProject a.homeSection .button { margin-top: 20px; text-decoration: none; text-transform: uppercase; font-weight: 400; display: inline-table; position: relative; width: 30px; height: 30px; text-align: center; color: #e6e6e6; border: 1px solid #e6e6e6; border-radius: 50px; box-shadow: 0 0 0 0 transparent; transition: all 0.2s ease-in; } .homeProject a.homeSection:hover .button { color: white !important; box-shadow: 0 0 30px 0 rgba(230, 230, 230, 0.5); background-color: #e6e6e6; transition: all 0.2s ease-out; } .homeProject a.homeSection:hover .button:before { animation: shine 0.5s 0s linear; } .homeProject a.homeSection .button:active { box-shadow: 0 0 0 0 transparent; transition: box-shadow 0.2s ease-in; } .homeProject a.homeSection .button:before { content: ""; display: block; width: 0; height: 86%; position: absolute; top: 7%; left: 0%; opacity: 0; background: #fff; box-shadow: 0 0 15px 3px #fff; transform: skewX(-20deg); } .homeProject a.homeSection .button i { display: table-cell; vertical-align: middle; font-size: 17px; } #eko-home a.homeSection .button { color: #9a71ff; border: 1px solid #9a71ff; } #eko-home a.homeSection:hover .button { box-shadow: 0 0 30px 0 rgba(154, 113, 255, 0.5); background-color: #9a71ff; } #sentry-home a.homeSection .button { color: #4cd8bd; border: 1px solid #4cd8bd; } #sentry-home a.homeSection:hover .button { box-shadow: 0 0 30px 0 rgba(76, 216, 189, 0.5); background-color: #4cd8bd; } #flieben-home a.homeSection .button { color: #5ae0ff; border: 1px solid rgb(92, 225, 255); } #flieben-home a.homeSection:hover .button { box-shadow: 0 0 30px 0 rgba(90, 224, 255, 0.5); background-color: #5ae0ff; } #magma-home a.homeSection .button { color: #ffab8d; border: 1px solid #ffab8d; } #magma-home a.homeSection:hover .button { box-shadow: 0 0 30px 0 rgba(255, 171, 141, 0.5); background-color: #ffab8d; } #qlic-home a.homeSection .button { color: #fc3000; border: 1px solid #fc3000; } #qlic-home a.homeSection:hover .button { box-shadow: 0 0 30px 0 rgba(192, 100, 66, 0.5); background-color: #fc3000; } @keyframes shine { from { opacity: 0; left: 0%; } 50% { opacity: 1; } to { opacity: 0; left: 100%; } } /* Section Logo * --------------------------------------- */ #sectionLogo #logo { display: table-cell; vertical-align: middle; margin: 0 auto; min-width: 200px; transform: translate(0px, 20vh); opacity: 0; transition: all 0.5s ease-out; } #sectionLogo.active #logo { transform: translate(0px, 0px); opacity: 1; transition: opacity 0.25s ease-out; transition: filter 0.5s ease-out; } #sectionLogo #logo img { animation: logo-in ease-in-out 0.5s; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes logo-in { 0% { filter: blur(50px); max-width: 5vw; } 100% { filter: blur(0px); max-width: 15vw; } } #sectionLogo.fp-section { border-bottom: 1px solid #fff; } /* Section WeDo * --------------------------------------- */ #sectionWeDo.container { display: flex; align-items: center; height: 100vh; } .intro { display: flex; align-items: flex-start; align-content: center; max-width: 100vw; height: 45vh; padding: 0 15vw 0 10vw; } #sectionWeDo #wedo { margin: 0; font-weight: 200; text-align: left; } #sectionWeDo #wedo span p { margin: 0; width: 100vw; font-size: 20vh; letter-spacing: -3px; font-weight: 900; opacity: 1; line-height: .75; } #sectionWeDo #wedo p:nth-child(1) { font-weight: 200; } #sectionWeDo .typeIndustrial { color: #c3af80; } body.fp-viewing-EKO #sectionWeDo #logo { transform: translateY(10vh); transition: all 0.8s ease-in-out; } body.fp-viewing-EKO #sectionWeDo #wedo span p { margin: 0vw 0; transition: margin 0.8s ease-in-out; } #sectionWeDo.fp-section { border-top: 1px solid #fff; } /* Section Sentry * --------------------------------------- */ #sectionSentry .homeProject, #portfolio2 .homeProject { background: rgb(255, 255, 255); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.5) 100%); } #sectionSentry #colors, #portfolio2 #colors { left: 60px; bottom: 0; } #sectionFlieben.fp-section { border-bottom: 1px solid #000; } /* Section About Us * --------------------------------------- */ .container { margin-right: auto; margin-left: auto; padding: 0; display: flex; align-items: center; flex-direction: column; width: 100vw; justify-content: center; } .container.title { margin: 0 auto; display: flex; justify-content: flex-end; min-height: 20vh; text-align: center; } .container.title .copete { font-size: 12px; line-height: 20px; color: #939393; text-transform: uppercase; font-weight: 500; } .container.content { margin: 0 auto; min-height: 80vh; padding-bottom: 80px; } .container.content>.row { display: flex; align-content: center; justify-content: center; left: 0; margin: 0px 150px; padding: 5% 0 2%; width: calc(100vw - 300px); height: calc(80vh - 80px); } .row { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; } #sectionOurValues .container.content .row { align-content: space-around; } #sectionOurValues, #sectionOurProcess, #sectionTheTeam { -webkit-font-smoothing: auto; color: #757575; } #sectionOurProcess .container.content, #sectionTheTeam .container.content, #sectionContactUs .container.content { text-align: left; } #sectionOurProcess .container.content>.row { width: 100%; height: 140vh; display: flex; flex-direction: column; align-items: center; transform: translateX(0); } #sectionOurProcess p, #sectionTheTeam p { margin: 0 0 14px; font-size: 17px; line-height: 25px; } #zHome .langTitle { display: flex; justify-content: center; max-width: 100%; } h5 { padding: 0; letter-spacing: 0; font-size: 32px; line-height: 40px; } .container.title h5 { margin: 20px 0 0 0; color: #000; font-weight: 500; } .separator { margin: 85px auto 0; width: 100px; height: 1px; display: table !important; background-color: #BA9E6C; } /* Section Our Values * --------------------------------------- */ #sectionOurValues .container.content .value { position: relative; width: 100%; max-width: 25%; padding: 0; margin: 1% 2%; } #sectionOurValues .container.content .value img { position: relative; transition: all 0.3s ease-in-out 0s; top: 0; margin-bottom: 10px; object-fit: contain; height: unset; width: 130px !important; max-width: 100%; position: inherit; } #zHome #sectionOurValues .langContent p { font-size: 18px; font-weight: 500; color: #000; } /* Section Our Process * --------------------------------------- */ .container.content .processContent { min-height: 100%; width: calc(25% - 50px); display: flex; align-items: flex-start; } .container.content .processContent:nth-child(4) { width: calc(25% - 130px); } .container.content .processContent .process { width: calc(100% - 80px) !important; } .container.content .processContent:nth-child(4) .process { width: 100% !important; } .container.content .processContent .stepProcess { width: calc(25% - 130px) !important } .container.content .processContent .stepProcess span { display: block !important; margin-bottom: 20px; color: #fff; text-transform: uppercase !important; font-size: 24px; line-height: 26px; font-weight: 500; } .container.content .processContent .stepProcess h3 { letter-spacing: -2px; font-weight: 500; color: #BA9E6C; font-size: 42px; line-height: 50px; margin: 0 0 10px; padding: 0; } .container.content .processNext { width: 80px; display: flex; justify-content: center; } .container.content .processNext img { height: 85px; } #sectionOurProcess h5 { color: #fff } /* Section Our Team * --------------------------------------- */ #zHome #sectionTheTeam .container.content>.row { width: 100%; flex-wrap: nowrap; } #zHome #sectionTheTeam .teamBG { background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%); padding: 40px; border-radius: 5px; height: 100%; width: calc(50vw - 150px); margin: 0 20px; } #zHome #sectionTheTeam .teamBG h3 { font-size: 22px; color: #BA9E6C; font-weight: 500; text-transform: uppercase; line-height: 1; margin-bottom: 15px; } body.fp-viewing-OurTeam #zHome, body.fp-viewing-ContactUs #zHome { background-color: #000; } /* Section Contact Us * --------------------------------------- */ #sectionContactUs .container.content { min-height: 100vh; padding: 0; } #sectionContactUs .container.content>.row { align-content: flex-start; flex-wrap: nowrap; flex-direction: column; top: unset; color: #fff; justify-content: flex-end !important; height: 100vh; padding: 0 0 33px 0; display: flex; align-items: flex-start; } #sectionContactUs .langContact { position: absolute; display: flex; flex-direction: column; max-width: 75vw; margin-bottom: 35vh; } #sectionContactUs .langContact p { position: relative; line-height: 1.4; font-size: 4.5vh; } #sectionContactUs .langContact p:nth-child(1) { font-weight: 100; } #sectionContactUs .langContact p:nth-child(2) { font-weight: 500; margin-top: 3vh; } #sectionContactUs .langContact p a:hover { color: #c3af80 } #sectionContactUs .container.content>.row img { max-height: 12vh; margin: 0 0 8vh; } #sectionContactUs .container.content>.row span { font-size: 14px; } /* */ #zHome [class*="section"] .langContent { margin: 0; display: flex; justify-content: center; } #zHome #sectionOurValues [class*="section"] .langContent { margin-bottom: 0; } #zHome #sectionOurValues .langContent p { font-size: 16px; line-height: 22px; } #zHome [id*="-home"] .langContent { margin: 15px 0; } #zHome #sentry-home .langContent { margin: 0 0 15px; } #zHome [id*="-home"] .langContent p { font-size: 3vh; line-height: 1.4; } #zHome #sectionTheTeam .langContent { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; width: calc(50vw - 240px); max-width: calc(50vw - 240px); } #zHome #sectionTheTeam .langContent p { position: relative; width: calc(50vw - 240px); max-width: calc(50vw - 240px); } @media screen and (max-width: 1366px) and (orientation: landscape) { #sectionWeDo #wedo span p { font-size: 15vh; } } /* Tablet landscape */ @media screen and (max-width: 1180px) and (orientation: landscape) { .intro { height: 38vh; } #sectionWeDo #wedo span p { font-size: 18vh; } #zHome [id*="-home"] .langContent { margin: 25px 0 15px; } #sectionQlic.active #qlic-home img { width: 20vw !important; } .container.title .copete { font-size: 14px; } .container.title h5 { font-size: 30px; line-height: 1.4; } .separator { margin-top: 90px !important; } #sectionOurValues .container.content .row { width: 100%; } #sectionOurProcess .container.content .processContent { width: calc(25% - 30px) !important; height: 60%; } .container.content .processContent:nth-child(4), .container.content .processContent .stepProcess { width: calc(25% - 90px) !important; } .container.content .processContent .process { width: calc(100% - 60px) !important; } .container.content .processContent .stepProcess span { font-size: 22px; line-height: 24px; } .container.content .processNext { width: 60px; } .container.content .processContent .stepProcess h3 { font-size: 40px; line-height: 48px; } .container.content .processContent .stepProcess span { font-size: 22px; } #sectionOurProcess p, #sectionTheTeam p { font-size: 16px; line-height: 24px; } #sectionOurProcess .container.content>.row { height: 100vh; justify-content: flex-start; transform: translateX(30px); } #zHome #sectionTheTeam .container.content>.row { max-width: calc(100vw - 140px); width: calc(100vw - 140px); } #zHome #sectionTheTeam .langContent p { position: relative; width: calc(50vw - 190px); } } /* Tablet portrait */ @media screen and (max-width: 850px) and (orientation: portrait) { .intro { height: 19vh; } #sectionWeDo #wedo span p { font-size: 9vh; } .homeProject a { bottom: 7vh; } .homeProject a.homeSection .button { margin-top: 60px; } #zHome [id*="-home"] .langContent { margin-bottom: 0; margin-top: 30px; } #zHome [id*="-home"] .langContent p { font-size: 2vh; line-height: 1.25; padding: 0 50px; } #sectionEko.active #eko-home img, #sectionSentry.active #sentry-home img, #sectionFlieben.active #flieben-home img, #sectionMagma.active #magma-home img { padding: 0 40px; opacity: 1; width: 45vh !important; } #sectionQlic.active #qlic-home img { padding: 0 40px; width: 30vh !important; } #sectionOurValues .container.content .value { max-width: 50%; margin: 6% 0; } #sectionOurValues .container.content .value img { width: 70% !important; } .container.title { min-height: 14vh; } .container.content { min-height: 86vh; } .container.title .copete { font-size: 14px; } .container.title h5 { font-size: 30px; line-height: 1.4; } .separator { margin-top: 90px !important; } #sectionOurValues .container.content .row { justify-content: center !important; } .container.content>.row { align-content: flex-start; } #sectionOurProcess .container.content>.row { flex-direction: row; } #sectionOurProcess .container.content { display: flex; justify-content: flex-start; margin-top: 20px; height: 400vh; } .container.content .processContent { width: calc(50% - 80px) !important; height: 45%; } .container.content .processContent:nth-child(4) { margin-right: 60px; } .container.content .processContent:nth-child(4), .container.content .processContent .stepProcess { width: calc(50% - 140px) !important; } .container.content .processContent .process { width: calc(100% - 60px) !important; } .container.content .processContent .stepProcess span { font-size: 22px; line-height: 24px; } .container.content .processNext { width: 60px; } .container.content .processContent .stepProcess h3 { font-size: 40px; line-height: 48px; } #sectionOurProcess .container.content>.row { height: 55vh; } #sectionOurProcess p, #sectionTheTeam p { font-size: 16px; line-height: 24px; } .container.content .processNext:nth-child(2) { width: 30px; justify-content: flex-end; } #zHome #sectionTheTeam .teamBG { width: 100%; margin: 0; } #zHome #sectionTheTeam .container.content>.row { max-width: calc(100vw - 160px); width: calc(100vw - 160px); height: 70vh; display: flex; flex-direction: column; } #zHome #sectionTheTeam .langContent p { position: relative; width: calc(100vw - 240px); max-width: calc(100vw - 240px); } #sectionTheTeamPhoto .fp-bg { background-size: contain !important; background-repeat: no-repeat; } #sectionContactUs .container.content>.row { padding: 0 0 33px 0; margin: 0px 100px; width: calc(100vw - 200px); } #sectionContactUs .container.content>.row img { max-height: 8vh; margin: 0 0 5vh; } #sectionContactUs .langContact { margin-bottom: 25vh; } #sectionContactUs .langContact p { font-size: 3vh; } } /* Phone landscape */ @media screen and (max-width: 700px) and (orientation: landscape) { body.fp-viewing-EKO #menu #sideMenu:hover ul li#liEKO, body.fp-viewing-Sentry #menu #sideMenu:hover ul li#liEKO, body.fp-viewing-FlieBen #menu #sideMenu:hover ul li#liEKO, body.fp-viewing-Magma #menu #sideMenu:hover ul li#liEKO, body.fp-viewing-Qlic #menu #sideMenu:hover ul li#liEKO, body.fp-viewing-EKO #menu #sideMenu.toggleON ul li#liEKO, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul li#liEKO, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul li#liEKO, body.fp-viewing-Magma #menu #sideMenu.toggleON ul li#liEKO, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul li#liEKO, body.fp-viewing-EKO #menu #sideMenu:hover ul li#liSentry, body.fp-viewing-Sentry #menu #sideMenu:hover ul li#liSentry, body.fp-viewing-FlieBen #menu #sideMenu:hover ul li#liSentry, body.fp-viewing-Magma #menu #sideMenu:hover ul li#liSentry, body.fp-viewing-Qlic #menu #sideMenu:hover ul li#liSentry, body.fp-viewing-EKO #menu #sideMenu:hover ul li#liFlieBen, body.fp-viewing-Sentry #menu #sideMenu:hover ul li#liFlieBen, body.fp-viewing-FlieBen #menu #sideMenu:hover ul li#liFlieBen, body.fp-viewing-Magma #menu #sideMenu:hover ul li#liFlieBen, body.fp-viewing-Qlic #menu #sideMenu:hover ul li#liFlieBen, body.fp-viewing-EKO #menu #sideMenu.toggleON ul li#liSentry, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul li#liSentry, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul li#liSentry, body.fp-viewing-Magma #menu #sideMenu.toggleON ul li#liSentry, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul li#liSentry, body.fp-viewing-EKO #menu #sideMenu.toggleON ul li#liFlieBen, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul li#liFlieBen, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul li#liFlieBen, body.fp-viewing-Magma #menu #sideMenu.toggleON ul li#liFlieBen, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul li#liFlieBen, body.fp-viewing-EKO #menu #sideMenu:hover ul li#liMagma, body.fp-viewing-Sentry #menu #sideMenu:hover ul li#liMagma, body.fp-viewing-FlieBen #menu #sideMenu:hover ul li#liMagma, body.fp-viewing-Magma #menu #sideMenu:hover ul li#liMagma, body.fp-viewing-Qlic #menu #sideMenu:hover ul li#liMagma, body.fp-viewing-EKO #menu #sideMenu.toggleON ul li#liMagma, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul li#liMagma, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul li#liMagma, body.fp-viewing-Magma #menu #sideMenu.toggleON ul li#liMagma, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul li#liMagma { margin: 0; } body.fp-viewing-EKO #menu #sideMenu:hover ul li#liQlic, body.fp-viewing-Sentry #menu #sideMenu:hover ul li#liQlic, body.fp-viewing-FlieBen #menu #sideMenu:hover ul li#liQlic, body.fp-viewing-Magma #menu #sideMenu:hover ul li#liQlic, body.fp-viewing-Qlic #menu #sideMenu:hover ul li#liQlic, body.fp-viewing-EKO #menu #sideMenu.toggleON ul li#liQlic, body.fp-viewing-Sentry #menu #sideMenu.toggleON ul li#liQlic, body.fp-viewing-FlieBen #menu #sideMenu.toggleON ul li#liQlic, body.fp-viewing-Magma #menu #sideMenu.toggleON ul li#liQlic, body.fp-viewing-Qlic #menu #sideMenu.toggleON ul li#liQlic { margin: 0 0 1px; } #sectionLogo #logo img { max-width: 20% !important; } .homeProject a.homeSection .button { width: 20px; height: 20px; margin-top: 0; } #zHome [id*="-home"] .langContent { margin: 5px 0 0; } #zHome [id*="-home"] .langContent p { font-size: 4vh; line-height: 1.4; } #sectionQlic.active #qlic-home img { width: 16vw !important; } .homeProject a.homeSection .button i { font-size: 13px; padding-left: 1px; } body.fp-viewing-EKO #mouse img, body.fp-viewing-Sentry #mouse img, body.fp-viewing-FlieBen #mouse img, body.fp-viewing-Magma #mouse img, body.fp-viewing-Qlic #mouse img { width: 13px; margin-bottom: 10px; } .container.title { margin-top: 20px; } .container.title .copete { font-size: 12px; } .container.title h5 { font-size: 24px; } .separator { margin-top: 60px !important; width: 80px; } #sectionOurValues .container.content { padding-bottom: 55px; } .container.content { margin-top: 0; } .container.content>.row { padding: 2% 0 1%; width: calc(100vw - 100px); } #sectionOurValues .container.content .value img { width: 80px !important; margin-bottom: 5px; } #sectionOurValues .container.content .row { justify-content: center !important; } .container.content>.row { align-content: flex-start; } #zHome [id*="section"] .langContent { height: 20px; } #zHome #sectionOurValues .langContent p { font-size: 16px; } #zHome [id*="-home"] .langContent { height: 35px; } #sectionOurValues .container.content .value img { width: 75px !important; margin-bottom: 5px; } #sectionOurValues .container.content { padding-bottom: 65px; } #sectionOurProcess .container.content .processContent { width: calc(100% - 140px) !important; height: 145%; margin-right: 0; min-height: unset; } .container.content .processContent:nth-child(4), .container.content .processContent .stepProcess { width: calc(100% - 170px) !important; } .container.content .processContent:nth-child(4) { margin-right: 30px; } .container.content .processContent .process { width: calc(100% - 30px) !important; } .container.content .processContent .stepProcess span { font-size: 22px; line-height: 24px; } .container.content .processContent .stepProcess h3 { font-size: 36px; line-height: 40px; } .container.content .processNext { width: 30px; justify-content: flex-end; } #sectionOurProcess p, #sectionTheTeam p { font-size: 15px; line-height: 22px; } #sectionOurProcess .container.content>.row { height: 400vh; flex-wrap: nowrap; flex-direction: column; justify-content: flex-start; transform: translateX(0px); } .container.content .processNext:nth-child(4) { width: 40px; justify-content: flex-end; } #zHome #sectionTheTeam .container.content { padding-top: 20px; } #zHome #sectionTheTeam .teamBG { width: 100%; height: 100%; margin: 0; padding: 30px; } #zHome #sectionTheTeam .teamBG span { display: block !important; margin-bottom: 20px; text-transform: uppercase !important; color: #BA9E6C; font-weight: 500; font-size: 20px; line-height: 20px; } #zHome #sectionTheTeam .container.content>.row { max-width: calc(100vw - 120px); width: calc(100vw - 120px); display: flex; flex-direction: column; height: 200vh; } #zHome #sectionTheTeam .langContent p { position: relative; width: calc(100vw - 190px); max-width: calc(100vw - 190px); } #sectionContactUs .container.content>.row { padding: 0 0 18px 0; width: calc(100vw - 140px); } #sectionContactUs .langContact p { line-height: 1.4; font-size: 4.75vh; } } /* Phone portrait */ @media screen and (max-width: 500px) and (orientation: portrait) { body.fp-viewing-EKO #mouse img, body.fp-viewing-Sentry #mouse img, body.fp-viewing-FlieBen #mouse img, body.fp-viewing-Magma #mouse img, body.fp-viewing-Qlic #mouse img { transform: translateY(0px); } #sectionLogo #logo img { max-width: 40% !important; } .intro { height: 14vh; } #sectionWeDo #wedo span p { font-size: 7vh; } [id*="-home"] .langContent { margin-top: 10px; } .homeProject a.homeSection .button { margin-top: 15px; margin-bottom: 10px; } .container.title { margin-top: 20px; } .container.title .copete { font-size: 12px; } .container.title h5 { font-size: 24px; } .separator { margin-top: 68px !important; width: 80px; } .container.content { margin-top: 2vh; } .container.content>.row { width: calc(100vw - 100px); } #zHome [id*="-home"] .langContent { margin: 10px 0 0 !important; } #zHome [class*="section"] .langContent p { font-size: 16px; } #sectionOurValues .container.content .value img { width: 80px !important; margin-bottom: 5px; } #sectionOurValues .container.content .row { justify-content: center !important; } .container.content>.row { align-content: flex-start; } #zHome [id*="section"] .langContent { height: 20px; } #zHome [class*="section"] .langContent p { font-size: 16px; } #zHome [id*="-home"] .langContent { height: 50px; } #sectionOurValues .container.content { padding-bottom: 65px; } #sectionOurValues .container.content .value img { width: 75px !important; margin-bottom: 5px; } .container.content .processContent { width: calc(100% - 140px) !important; height: 145%; margin-right: 0; min-height: unset; } .container.content .processContent:nth-child(4), .container.content .processContent .stepProcess { width: calc(100% - 170px) !important; } .container.content .processContent:nth-child(4) { margin-right: 30px; } .container.content .processContent .process { width: calc(100% - 30px) !important; } .container.content .processContent .stepProcess span { font-size: 22px; line-height: 24px; } .container.content .processContent .stepProcess h3 { font-size: 36px; line-height: 40px; } .container.content .processNext { width: 30px; justify-content: flex-end; } #sectionOurProcess p, #sectionTheTeam p { font-size: 15px; line-height: 22px; } #sectionOurProcess .container.content>.row { height: 400vh; flex-wrap: nowrap; flex-direction: column; justify-content: flex-start; } .container.content .processNext:nth-child(4) { width: 40px; justify-content: flex-end; } #zHome #sectionTheTeam .container.content { padding-top: 20px; } #zHome #sectionTheTeam .teamBG { width: 100%; height: 100%; margin: 0; padding: 30px; } #zHome #sectionTheTeam .teamBG span { display: block !important; margin-bottom: 20px; text-transform: uppercase !important; color: #BA9E6C; font-weight: 500; font-size: 20px; line-height: 20px; } #zHome #sectionTheTeam .container.content>.row { max-width: calc(100vw - 120px); width: calc(100vw - 120px); display: flex; flex-direction: column; height: 220vh; } #zHome #sectionTheTeam .langContent p { position: relative; width: calc(100vw - 190px); max-width: calc(100vw - 190px); } #sectionContactUs .container.content>.row { padding: 0 0 24px 0; margin: 0px 100px; width: calc(100vw - 130px); } #sectionContactUs .langContact { max-width: calc(100vw - 130px); } #sectionContactUs .langContact p { font-size: 3.3vh; } }