@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap); /* App styles */ /* Colors */ /* Menu */ /* Root vars */ :root { --nav-copyright-color: #fff; --nav-burguer-color: #fff; --nav-logo-color: #fff; --nav-background-color: #000; --height-final: 100%; } /* Padding Section */ @font-face { font-family: "Sohne-Schmal"; src: url(../fonts/sohne-schmal.woff) format("woff"), url(../fonts/sohne-schmal.woff2) format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Sohne-Schmal"; src: url(data:font/woff;base64,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) format("woff"), url(data:font/woff2;base64,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) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Recoleta"; src: url(../fonts/recoleta-regular.woff) format("woff"), url(../fonts/recoleta-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url(../fonts/Inter-Bold.ttf) format("ttf"); font-weight: 600; font-display: swap; } @font-face { font-family: "Inter"; src: url(../fonts/Inter-Medium.ttf) format("ttf"); font-weight: 400; font-display: swap; } @font-face { font-family: "Tungsten"; src: url(../fonts/tungsten-bold.woff) format("woff"), url(../fonts/tungsten-bold.woff2) format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Tungsten"; src: url(../fonts/tungsten-semibold.woff) format("woff"), url(../fonts/tungsten-semibold.woff2) format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Tungsten"; src: url(../fonts/tungsten-medium.woff) format("woff"), url(../fonts/tungsten-medium.woff2) format("woff2"); font-weight: 400; font-display: swap; } /* Mixins */ /** * Computes a topShadow for a card effect. * * @param {Number} $depth - depth level * * @return {List} */ /** * Computes a bottomShadow for a card effect. * * @param {Number} $depth - depth level * * @return {List} */ /** * Font Face * * @param {string} $fontName - Name of the font * @param {string} $folderName - Subfolder inside the fonts folder * @param {string} $fileName - Name of the font-file * @param {string} $fontWeight (normal) - Font weight value * @param {string} $fontStyle (normal) - Font style value */ /** * Font Responsive * * @param {number} $minFontSize - Min font size * @param {number} $maxFontSize - Max font size * @param {number} $minViewport - Min viewport size * @param {number} $maxViewport - Max viewport size */ /** * Transition * * @param {string} $prop * @param {duration} $duration (0.75s) * @param {duration} $delay (0s) * @param {ease} $ease ($easeInOutCubic) */ /** * Cross Browser Placeholder styles * * Uses the @content styles within the mixin as stytes */ /** * Set pseudo elements styles that are used mostly (content, display, position) */ @-webkit-keyframes soundWave { 0% { transform: translateX(0); } to { transform: translateX(-63px); } } @keyframes soundWave { 0% { transform: translateX(0); } to { transform: translateX(-63px); } } /** * Font Responsive * * @param {number} $minFontSize - Min font size * @param {number} $maxFontSize - Max font size * @param {number} $minViewport - Min viewport size * @param {number} $maxViewport - Max viewport size */ /* Core styles */ * { outline: 0; } body { line-height: 1; touch-action: none; } ol, ul { list-style: none; } blockquote, q { quotes: none; } input[type=submit] { -webkit-appearance: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } *, *:before, *:after { box-sizing: border-box; } 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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-weight: unset; vertical-align: middle; background: transparent; text-decoration: none; } html { *overflow: hidden; } html, body { height: 100%; font-family: "DM Sans", Arial, Helvetica, sans-serif; font-weight: 400; } strong { font-weight: 500; vertical-align: baseline; } button { border: none; outline: none; cursor: pointer; background: transparent; padding: 0; text-align: inherit; letter-spacing: inherit; font-size: inherit; text-transform: inherit; color: inherit; } @-webkit-keyframes zoominInfinite { 0% { transform: scale(1); opacity: 0; } 20% { transform: scale(1.5); opacity: 1; } 90% { transform: scale(4); opacity: 0.2; } 100% { opacity: 0; } } @keyframes zoominInfinite { 0% { transform: scale(1); opacity: 0; } 20% { transform: scale(1.5); opacity: 1; } 90% { transform: scale(4); opacity: 0.2; } 100% { opacity: 0; } } .scrollDown { -webkit-animation-name: scrollDown; animation-name: scrollDown; -webkit-animation-duration: 2500ms; animation-duration: 2500ms; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(0.47, -0.01, 0.49, 0.99); animation-timing-function: cubic-bezier(0.47, -0.01, 0.49, 0.99); } .zoominInfinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-name: zoominInfinite; animation-name: zoominInfinite; } @-webkit-keyframes zoominout { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 80% { transform: scale(1); } 100% { transform: scale(1); } } @keyframes zoominout { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 80% { transform: scale(1); } 100% { transform: scale(1); } } .animated.zoominout { opacity: 1; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 28s; animation-duration: 28s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-name: zoominout; animation-name: zoominout; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0px); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0px); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .animated.bounce { opacity: 1; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 2.25s; animation-duration: 2.25s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .animated.flash { opacity: 1; -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes flash2 { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash2 { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .animated.flash2 { opacity: 1; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 8s; animation-duration: 8s; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation-name: flash2; animation-name: flash2; } @-webkit-keyframes jello { 11.1% { transform: none; } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { transform: skewX(-0.19531deg) skewY(-0.19531deg); } 100% { transform: none; } } @keyframes jello { 11.1% { transform: none; } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { transform: skewX(-0.19531deg) skewY(-0.19531deg); } 100% { transform: none; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @-webkit-keyframes rubberBand { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } } @-webkit-keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { transform-origin: top center; } 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } @keyframes swing { 20%, 40%, 60%, 80%, 100% { transform-origin: top center; } 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } @keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } @-webkit-keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } } @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } @-webkit-keyframes bounceInVan { 0% { opacity: 0; transform: translate(-2000px, 0); } 60% { opacity: 1; transform: translate(25px, 0) rotate(0deg); } 65% { transform: translate(30px, 0) rotate(5deg); } 70% { transform: translate(30px, 0) rotate(0deg); } 80% { transform: translate(-10px, 0) rotate(0deg); } 100% { transform: translate(0, 0) rotate(0deg); } } @keyframes bounceInVan { 0% { opacity: 0; transform: translate(-2000px, 0); } 60% { opacity: 1; transform: translate(25px, 0) rotate(0deg); } 65% { transform: translate(30px, 0) rotate(5deg); } 70% { transform: translate(30px, 0) rotate(0deg); } 80% { transform: translate(-10px, 0) rotate(0deg); } 100% { transform: translate(0, 0) rotate(0deg); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } @-webkit-keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(0.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(0.3); } } @-webkit-keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } @-webkit-keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } @-webkit-keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } @-webkit-keyframes bounceOutUp { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-2000px); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-500px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(60px) scale(1.1); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(50px); } 33% { opacity: 0.4; } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } @-webkit-keyframes flip { 0% { transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { transform: perspective(400px) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { transform: perspective(400px) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flipInX { 0% { opacity: 0; transform: perspective(400px) rotateX(90deg); } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { opacity: 1; transform: perspective(400px) rotateX(0deg); } } @-webkit-keyframes flipInY { 0% { opacity: 0; transform: perspective(400px) rotateY(90deg); } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { opacity: 1; transform: perspective(400px) rotateY(0deg); } } @keyframes flipInY { 0% { opacity: 0; transform: perspective(400px) rotateY(90deg); } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { opacity: 1; transform: perspective(400px) rotateY(0deg); } } @-webkit-keyframes flipOutX { 0% { opacity: 1; transform: perspective(400px) rotateX(0deg); } 100% { opacity: 0; transform: perspective(400px) rotateX(90deg); } } @keyframes flipOutX { 0% { opacity: 1; transform: perspective(400px) rotateX(0deg); } 100% { opacity: 0; transform: perspective(400px) rotateX(90deg); } } @-webkit-keyframes flipOutY { 0% { opacity: 1; transform: perspective(400px) rotateY(0deg); } 100% { opacity: 0; transform: perspective(400px) rotateY(90deg); } } @keyframes flipOutY { 0% { opacity: 1; transform: perspective(400px) rotateY(0deg); } 100% { opacity: 0; transform: perspective(400px) rotateY(90deg); } } @-webkit-keyframes lightSpeedIn { 0% { opacity: 0; transform: translateX(100%) skewX(-30deg); } 60% { opacity: 1; transform: translateX(-20%) skewX(30deg); } 80% { opacity: 1; transform: translateX(0%) skewX(-15deg); } 100% { opacity: 1; transform: translateX(0%) skewX(0deg); } } @keyframes lightSpeedIn { 0% { opacity: 0; transform: translateX(100%) skewX(-30deg); } 60% { opacity: 1; transform: translateX(-20%) skewX(30deg); } 80% { opacity: 1; transform: translateX(0%) skewX(-15deg); } 100% { opacity: 1; transform: translateX(0%) skewX(0deg); } } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; transform: translateX(0%) skewX(0deg); } 100% { opacity: 0; transform: translateX(100%) skewX(-30deg); } } @keyframes lightSpeedOut { 0% { opacity: 1; transform: translateX(0%) skewX(0deg); } 100% { opacity: 0; transform: translateX(100%) skewX(-30deg); } } @-webkit-keyframes rotateIn { 0% { opacity: 0; transform: rotate(-200deg); transform-origin: center center; } 100% { opacity: 1; transform: rotate(0); transform-origin: center center; } } @keyframes rotateIn { 0% { opacity: 0; transform: rotate(-200deg); transform-origin: center center; } 100% { opacity: 1; transform: rotate(0); transform-origin: center center; } } @keyframes rotateInDownLeft { 0% { opacity: 0; transform: rotate(-90deg); transform-origin: left bottom; } 100% { opacity: 1; transform: rotate(0); transform-origin: left bottom; } } @keyframes rotateInDownRight { 0% { opacity: 0; transform: rotate(90deg); transform-origin: right bottom; } 100% { opacity: 1; transform: rotate(0); transform-origin: right bottom; } } @keyframes rotateInUpLeft { 0% { opacity: 0; transform: rotate(90deg); transform-origin: left bottom; } 100% { opacity: 1; transform: rotate(0); transform-origin: left bottom; } } @keyframes rotateInUpRight { 0% { opacity: 0; transform: rotate(-90deg); transform-origin: right bottom; } 100% { opacity: 1; transform: rotate(0); transform-origin: right bottom; } } @-webkit-keyframes rotateOut { 0% { opacity: 1; transform: rotate(0); transform-origin: center center; } 100% { opacity: 0; transform: rotate(200deg); transform-origin: center center; } } @keyframes rotateOut { 0% { opacity: 1; transform: rotate(0); transform-origin: center center; } 100% { opacity: 0; transform: rotate(200deg); transform-origin: center center; } } @-webkit-keyframes rotateOutDownLeft { 0% { opacity: 1; transform: rotate(0); transform-origin: left bottom; } 100% { opacity: 0; transform: rotate(90deg); transform-origin: left bottom; } } @keyframes rotateOutDownLeft { 0% { opacity: 1; transform: rotate(0); transform-origin: left bottom; } 100% { opacity: 0; transform: rotate(90deg); transform-origin: left bottom; } } @-webkit-keyframes rotateOutDownRight { 0% { opacity: 1; transform: rotate(0); transform-origin: right bottom; } 100% { opacity: 0; transform: rotate(-90deg); transform-origin: right bottom; } } @keyframes rotateOutDownRight { 0% { opacity: 1; transform: rotate(0); transform-origin: right bottom; } 100% { opacity: 0; transform: rotate(-90deg); transform-origin: right bottom; } } @-webkit-keyframes rotateOutUpLeft { 0% { opacity: 1; transform: rotate(0); transform-origin: left bottom; } 100% { opacity: 0; transform: rotate(-90deg); transform-origin: left bottom; } } @keyframes rotateOutUpLeft { 0% { opacity: 1; transform: rotate(0); transform-origin: left bottom; } 100% { opacity: 0; transform: rotate(-90deg); transform-origin: left bottom; } } @-webkit-keyframes rotateOutUpRight { 0% { opacity: 1; transform: rotate(0); transform-origin: right bottom; } 100% { opacity: 0; transform: rotate(90deg); transform-origin: right bottom; } } @keyframes rotateOutUpRight { 0% { opacity: 1; transform: rotate(0); transform-origin: right bottom; } 100% { opacity: 0; transform: rotate(90deg); transform-origin: right bottom; } } @-webkit-keyframes slideInDown { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes slideInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes slideInRight { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes slideInUp { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideInUp { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes slideOutDown { 0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } @keyframes slideOutDown { 0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } @-webkit-keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } @-webkit-keyframes slideOutRight { 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } @keyframes slideOutRight { 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } @-webkit-keyframes slideOutUp { 0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } @-webkit-keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; transform: rotate(0); transform-origin: top left; } 20%, 60% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; transform: rotate(80deg); transform-origin: top left; } 40% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; transform: rotate(60deg); transform-origin: top left; } 80% { opacity: 1; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; transform: rotate(60deg) translateY(0); transform-origin: top left; } 100% { opacity: 0; transform: translateY(700px); } } @keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; transform: rotate(0); transform-origin: top left; } 20%, 60% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; transform: rotate(80deg); transform-origin: top left; } 40% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; transform: rotate(60deg); transform-origin: top left; } 80% { opacity: 1; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; transform: rotate(60deg) translateY(0); transform-origin: top left; } 100% { opacity: 0; transform: translateY(700px); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } @-webkit-keyframes rollOut { 0% { opacity: 1; transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; transform: translateX(100%) rotate(120deg); } } @-webkit-keyframes zoomIn { 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-webkit-keyframes zoomInDown { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } } @keyframes zoomInDown { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } } @-webkit-keyframes zoomInLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); } } @keyframes zoomInLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); } } @-webkit-keyframes zoomInRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); } } @keyframes zoomInRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); } } @-webkit-keyframes zoomInUp { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } } @keyframes zoomInUp { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-webkit-keyframes zoomOutIndex { 0% { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; z-index: -1; } } @keyframes zoomOutIndex { 0% { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; z-index: -1; } } @-webkit-keyframes zoomOutDown { 40% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform-origin: center bottom; } } @keyframes zoomOutDown { 40% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform-origin: center bottom; } } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; transform: scale(0.1) translate3d(-2000px, 0, 0); transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; transform: scale(0.1) translate3d(-2000px, 0, 0); transform-origin: left center; } } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; transform: scale(0.1) translate3d(2000px, 0, 0); transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; transform: scale(0.1) translate3d(2000px, 0, 0); transform-origin: right center; } } @-webkit-keyframes zoomOutUp { 40% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform-origin: center bottom; } } @keyframes zoomOutUp { 40% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform-origin: center bottom; } } @-webkit-keyframes clipInLeft { 0% { -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 clipInLeft { 0% { -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); } } .animated { opacity: 0; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 5s; animation-duration: 5s; } /*===================================================================================*/ /* pulse */ /*===================================================================================*/ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .animated.pulse { opacity: 1; -webkit-animation-name: pulse; animation-name: pulse; } /*===================================================================================*/ /* flipInX */ /*===================================================================================*/ @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .animated.flipInX { opacity: 1; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } /*===================================================================================*/ /* fadeIn */ /*===================================================================================*/ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .animated.fadeIn { opacity: 1; -webkit-animation-name: fadeIn; animation-name: fadeIn; } /*===================================================================================*/ /* fadeInUp */ /*===================================================================================*/ @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInUp { opacity: 1; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } /*===================================================================================*/ /* fadeInDown */ /*===================================================================================*/ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInDown { opacity: 1; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } /*===================================================================================*/ /* fadeInLeft */ /*===================================================================================*/ @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-100px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-100px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInLeft { opacity: 1; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } /*===================================================================================*/ /* fadeInRight */ /*===================================================================================*/ @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(100px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(100px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInRight { opacity: 1; -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } /*===================================================================================*/ /* fadeInUpBig */ /*===================================================================================*/ @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInUpBig { opacity: 1; -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } /*===================================================================================*/ /* fadeInDownBig */ /*===================================================================================*/ @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } } .animated.fadeInDownBig { opacity: 1; -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } /*===================================================================================*/ /* fadeInLeftBig */ /*===================================================================================*/ @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInLeftBig { opacity: 1; -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } /*===================================================================================*/ /* fadeInRightBig */ /*===================================================================================*/ @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } .animated.fadeInRightBig { opacity: 1; -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } /*===================================================================================*/ /* bounceIn */ /*===================================================================================*/ @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); } 100% { -webkit-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } .animated.bounceIn { opacity: 1; -webkit-animation-name: bounceIn; animation-name: bounceIn; } /*===================================================================================*/ /* bounceInUp */ /*===================================================================================*/ @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .animated.bounceInUp { opacity: 1; -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } /*===================================================================================*/ /* bounceInDown */ /*===================================================================================*/ @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .animated.bounceInDown { opacity: 1; -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } /*===================================================================================*/ /* bounceInLeft */ /*===================================================================================*/ @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .animated.bounceInLeft { opacity: 1; -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } /*===================================================================================*/ /* bounceInRight */ /*===================================================================================*/ @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .animated.bounceInRight { opacity: 1; -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } /*===================================================================================*/ /* rotateInUpLeft */ /*===================================================================================*/ @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInUpLeft { opacity: 1; -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } /*===================================================================================*/ /* otateInDownLeft */ /*===================================================================================*/ @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInDownLeft { opacity: 1; -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } /*===================================================================================*/ /* rotateInUpRight */ /*===================================================================================*/ @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInUpRight { opacity: 1; -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } /*===================================================================================*/ /* rotateInDownRight */ /*===================================================================================*/ @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .animated.rotateInDownRight { opacity: 1; -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } /*===================================================================================*/ /* lightSpeedRight */ /*===================================================================================*/ @-webkit-keyframes lightSpeedRight { 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedRight { 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } .animated.lightSpeedRight { opacity: 1; -webkit-animation-name: lightSpeedRight; animation-name: lightSpeedRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } .animated.lightSpeedRight { opacity: 1; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } /*===================================================================================*/ /* lightSpeedLeft */ /*===================================================================================*/ @-webkit-keyframes lightSpeedLeft { 0% { -webkit-transform: translateX(-100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedLeft { 0% { transform: translateX(-100%) skewX(-30deg); opacity: 0; } 60% { transform: translateX(20%) skewX(30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } .animated.lightSpeedLeft { opacity: 1; -webkit-animation-name: lightSpeedLeft; animation-name: lightSpeedLeft; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } .animated.lightSpeedLeft { opacity: 1; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } /*===================================================================================*/ /* rollin */ /*===================================================================================*/ /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .animated.rollIn { opacity: 1; -webkit-animation-name: rollIn; animation-name: rollIn; } .table { height: 100%; width: 100%; display: table; z-index: 10; margin-bottom: 0px; } .table .cell { display: table-cell; vertical-align: middle; text-align: center; } .row.no-padding { margin-left: 0px; margin-right: 0px; } .row.no-padding [class*=col-] { padding: 0px; } .full-height { height: 100%; } .w_iframe { width: 100%; height: auto; margin: 0 auto; } .w_iframe .h_iframe { position: relative; } .w_iframe .h_iframe img.ratio { display: block; width: 100%; height: auto; } .w_iframe .h_iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .parallax { background-attachment: fixed; background-position: 50% 0; width: 100%; } @media (max-width: 767px) { .parallax { background-attachment: scroll; background-position: center; background-size: cover; } } @media (min-width: 768px) { .parallax { background-attachment: scroll; background-position: center; background-size: cover; } } body.lock { overflow: hidden; } .line { overflow-y: hidden; } /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ html.has-scroll-smooth { overflow: hidden; } html.has-scroll-dragging { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .has-scroll-smooth body { overflow: hidden; } .has-scroll-smooth [data-scroll-container] { min-height: 100vh; } .c-scrollbar { position: absolute; right: 0; top: 0; width: 10px; height: 100vh; transform-origin: center right; transition: transform 0.3s, opacity 0.3s; opacity: 0; z-index: 9999; } .c-scrollbar:hover { transform: scaleX(1.6); } .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { opacity: 1; } .c-scrollbar_thumb { position: absolute; top: 0; right: 0; background-color: #ff003e; opacity: 2; width: 10px; border-radius: 0; margin: 0; cursor: -webkit-grab; cursor: grab; } .has-scroll-dragging .c-scrollbar_thumb { cursor: -webkit-grabbing; cursor: grabbing; } /** * Swiper 6.3.5 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2020 Vladimir Kharlampidi * * Released under the MIT License * * Released on: October 30, 2020 */ /* @font-face { font-family: 'swiper-icons'; src: url('data:application/font-woff;charset=utf-8;base64, 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') format('woff'); font-weight: 400; font-style: normal; } */ :root { --swiper-theme-color: #007aff; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } /* 3D Effects */ .swiper-container-3d { perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } /* CSS Mode */ .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(-1 * 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-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: "next"; } .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color: #ffffff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #000000; } .swiper-button-lock { display: none; } :root { /* --swiper-pagination-color: var(--swiper-theme-color); */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.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(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Progress */ .swiper-pagination-progressbar { background: rgba(0, 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-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color: #ffffff; } .swiper-pagination-black { --swiper-pagination-color: #000000; } .swiper-pagination-lock { display: none; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); 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 > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } /* Preloader */ :root { /* --swiper-preloader-color: var(--swiper-theme-color); */ } .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%; -webkit-animation: swiper-preloader-spin 1s infinite linear; animation: swiper-preloader-spin 1s infinite linear; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @-webkit-keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-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-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* App Pages, Sections & Components styles */ /* Global */ .layout-sizes, .footer, .food-families .food-families-slider .lower-bar, .portrait .intro-container .main-title, section .container-frame .container, footer .container-frame .container, figure .container-frame .container, article .container-frame .container, nav .container-frame .container { width: 100%; max-width: 1600px; padding-left: 36px; padding-right: 36px; margin: 0 auto; } @media (min-width: 1200px) { .layout-sizes, .footer, .food-families .food-families-slider .lower-bar, .portrait .intro-container .main-title, section .container-frame .container, footer .container-frame .container, figure .container-frame .container, article .container-frame .container, nav .container-frame .container { padding: 0 5vh; } } @media (min-width: 1600px) { .layout-sizes, .footer, .food-families .food-families-slider .lower-bar, .portrait .intro-container .main-title, section .container-frame .container, footer .container-frame .container, figure .container-frame .container, article .container-frame .container, nav .container-frame .container { padding: 0 10vh; } } section .container-full, footer .container-full, figure .container-full, article .container-full, nav .container-full { width: 100%; } section .container-full .container, footer .container-full .container, figure .container-full .container, article .container-full .container, nav .container-full .container { width: 100%; max-width: 1776px; margin: 0 auto; padding: 0 3vw; } @media (min-width: 1600px) { section .container-full .container, footer .container-full .container, figure .container-full .container, article .container-full .container, nav .container-full .container { padding: 0; } } section .container-frame, footer .container-frame, figure .container-frame, article .container-frame, nav .container-frame { width: 100%; padding: 0; } .mealprep { background-color: #121212; padding: 20vh 0; position: relative; } .mealprep::before { content: ""; position: absolute; top: -3px; width: 100%; height: 6px; left: 0; background-color: #121212; } .mealprep .container { position: relative; } .mealprep .container .athlets-journey { display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%; } .mealprep .container .athlets-journey .main-text { width: 50%; height: 100%; position: relative; z-index: 10; white-space: nowrap; } .mealprep .container .athlets-journey .main-text .white-mask { position: absolute; z-index: 2; overflow: hidden; } .mealprep .container .athlets-journey .main-text .white-mask .white-text { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .mealprep .container .athlets-journey .main-text .red-mask { z-index: 1; } .mealprep .container .athlets-journey .main-text .red-mask .red-text { position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .mealprep .container .athlets-journey .main-text.left { transform: translateY(-6%); } .mealprep .container .athlets-journey .main-text.left .red-mask { display: flex; justify-content: flex-end; } .mealprep .container .athlets-journey .main-text.left .white-mask { display: flex; justify-content: flex-end; } .mealprep .container .athlets-journey .main-text.right { transform: translateY(75%); } .mealprep .container .athlets-journey .main-text.right .red-mask { display: flex; justify-content: flex-start; } .mealprep .container .athlets-journey .main-text.right .white-mask { display: flex; justify-content: flex-start; } .mealprep .container .athlets-journey .mealprep-img { width: 50vw; z-index: 0; position: relative; } .mealprep .container .athlets-journey .mealprep-img:before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1; background-color: #000; opacity: 0.25; } @media (min-width: 992px) { .mealprep .container .athlets-journey .mealprep-img { width: 30vw; } } .mealprep .container .athlets-journey .mealprep-img img { width: 50vw; } @media (min-width: 992px) { .mealprep .container .athlets-journey .mealprep-img img { width: 30vw; } } .mealprep .container .athlets-journey span { font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-weight: 700; display: block; width: 100%; font-size: 60px; font-weight: normal; } @media (min-width: 768px) { .mealprep .container .athlets-journey span { font-size: 280px; } } @media (min-width: 768px) and (max-width: 1920px) { .mealprep .container .athlets-journey span { font-size: calc( 60px + (280 - 60) * (( 100vw - 768px ) / (1920 - 768)) ); } } .mealprep .container .athlets-journey span.red-text { color: #e80f2e; } .mealprep .container .athlets-journey span.white-text { color: #fff; } .mealprep .container .athlets-journey .mealprep-goto { position: absolute; bottom: -75px; right: auto; left: auto; } @media (min-width: 992px) { .mealprep .container .athlets-journey .mealprep-goto { position: absolute; bottom: 22%; right: auto; left: 22%; } } .mealprep .container .athlets-journey .mealprep-goto .btn { display: flex; flex-direction: row; align-items: center; position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; z-index: 15; } .mealprep .container .athlets-journey .mealprep-goto .btn .btn-text { font-family: "Inter"; font-weight: 600; font-size: 15px; cursor: pointer; color: #fff; margin-right: 10px; padding-right: 1vw; } @media (min-width: 768px) { .mealprep .container .athlets-journey .mealprep-goto .btn .btn-text { font-size: 20px; } } @media (min-width: 768px) and (max-width: 1920px) { .mealprep .container .athlets-journey .mealprep-goto .btn .btn-text { font-size: calc( 15px + (20 - 15) * (( 100vw - 768px ) / (1920 - 768)) ); } } .mealprep .container .athlets-journey .mealprep-goto .btn .btn-text:hover ~ .btn-arrow { background-color: #e80f2e; } .mealprep .container .athlets-journey .mealprep-goto .btn .btn-text:hover ~ .btn-arrow .arrow-white { left: 50%; } .mealprep .container .athlets-journey .mealprep-goto .btn .btn-text:hover ~ .btn-arrow .arrow-red { left: 150%; } .mealprep .container .athlets-journey .mealprep-goto .btn .btn-arrow { width: 40px; height: 40px; max-width: 40px; max-height: 40px; overflow: hidden; border: solid 2px #e80f2e; border-radius: 50%; display: flex; align-items: center; position: relative; cursor: pointer; transition: background-color 0.3s ease-in-out; } @media (min-width: 992px) { .mealprep .container .athlets-journey .mealprep-goto .btn .btn-arrow { width: 65px; height: 65px; max-width: 65px; max-height: 65px; } } .mealprep .container .athlets-journey .mealprep-goto .btn .btn-arrow:hover { background-color: #e80f2e; } .mealprep .container .athlets-journey .mealprep-goto .btn .btn-arrow:hover .arrow-white { left: 50%; } .mealprep .container .athlets-journey .mealprep-goto .btn .btn-arrow:hover .arrow-red { left: 150%; } .mealprep .container .athlets-journey .mealprep-goto .btn .btn-arrow .arrow-white { position: absolute; top: 50%; left: -50%; transform: translate(-50%, -50%); transition: left 0.3s ease-in-out; } .mealprep .container .athlets-journey .mealprep-goto .btn .btn-arrow .arrow-red { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: left 0.3s ease-in-out; } .mealprep .container .athlets-journey .tagname { color: #ccc; display: block; margin-bottom: 5vh; font-size: 15px; font-weight: 600; padding-bottom: 15px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-family: inherit; position: absolute; top: -60px; right: auto; left: auto; } @media (min-width: 992px) { .mealprep .container .athlets-journey .tagname { position: absolute; top: 22%; right: auto; left: 22%; } } .mealprep .container .athlets-journey .tagname::before { content: ""; width: 25%; height: 2px; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background-color: #ccc; } @media (min-width: 992px) { .mealprep .container .athlets-journey .tagname::before { left: 0; transform: translate(0px); } } @media (min-width: 992px) { .mealprep .container .athlets-journey .tagname { font-size: 18px; } } #instagram { padding: 10vh 0; overflow: hidden; background-color: #000; } @media (min-width: 768px) { #instagram { padding: 16vh 0; } } #instagram .container { width: 90%; max-width: 1200px; margin: 0 auto; } #instagram .container .box-title { margin-bottom: 4vh; text-align: center; display: flex; flex-direction: column; width: 100%; justify-content: center; align-items: center; } @media (min-width: 768px) { #instagram .container .box-title { display: flex; justify-content: space-between; margin-bottom: 12vh; } } #instagram .container .box-title .copy { font-size: 14px; font-weight: 600; letter-spacing: 2px; color: #ccc; line-height: 1.8; text-transform: uppercase; margin-bottom: 2vh; } @media (min-width: 768px) { #instagram .container .box-title .copy { font-size: 18px; } } #instagram .container .box-title h1 { font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-size: 70px; color: #fff; text-transform: uppercase; font-weight: normal; } @media (min-width: 768px) { #instagram .container .box-title h1 { font-size: 130px; } } @media (min-width: 768px) and (max-width: 1920px) { #instagram .container .box-title h1 { font-size: calc( 70px + (130 - 70) * (( 100vw - 768px ) / (1920 - 768)) ); } } #instagram .container .box-title .buttons { display: flex; align-items: center; gap: 40px; } @media (max-width: 767px) { #instagram .container .box-title .buttons { gap: 0px; } } #instagram .container .button-primary span { font-family: "Inter"; font-weight: 300; color: #fff; } @media (max-width: 767px) { #instagram .container .button-primary span { display: none; } } #instagram .container .button-primary a { flex-direction: row; } #instagram .container .button-primary a .container-magnetic { *padding: 20px 0px 20px 20px; } #instagram .instagram__dragger { display: flex; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-top: 10vh; } @media (min-width: 992px) { #instagram .instagram__dragger { margin-top: 10vh; } } #instagram .instagram__dragger .instagram_group { display: flex; align-items: center; flex-shrink: 0; will-change: transform; white-space: nowrap; } #instagram .instagram__dragger .instagram__image { display: flex; flex-shrink: 0; position: relative; margin-right: 5.556vw; } #instagram .instagram__dragger .instagram__image .image__src { top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; border: none; display: block; pointer-events: none; } #instagram .instagram__dragger .instagram__image:nth-child(2n-1) { width: 200px; height: 200px; } @media (min-width: 768px) { #instagram .instagram__dragger .instagram__image:nth-child(2n-1) { width: 344px; height: 344px; } } #instagram .instagram__dragger .instagram__image:nth-child(2n) { width: 273px; height: 272.5px; } @media (min-width: 768px) { #instagram .instagram__dragger .instagram__image:nth-child(2n) { width: 426px; height: 427px; } } .portrait { background-color: #000; position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; margin-bottom: 20vh; background-color: #000; } .portrait .intro-container { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .portrait .intro-container .video-bg { position: relative; height: 280px; } .portrait .intro-container .video-bg img { z-index: 9; } .portrait .intro-container .video-bg img.blackish { z-index: 10; } .portrait .intro-container .video-bg video { z-index: 8; } .portrait .intro-container .video-bg video, .portrait .intro-container .video-bg img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: clamp(130px, 25vw, 250px); -o-object-fit: cover; object-fit: cover; transition: top 300ms ease; } .portrait .intro-container .video-bg video.initial, .portrait .intro-container .video-bg img.initial { top: 35%; } @media (max-width: 767px) { .portrait .intro-container .video-bg video, .portrait .intro-container .video-bg img { transform: translate(-50%, -50%); height: 335px; } } @media (min-width: 768px) { .portrait .intro-container .video-bg video.mobile, .portrait .intro-container .video-bg img.mobile { display: none; } } @media (max-width: 767px) { .portrait .intro-container .video-bg video.desktop, .portrait .intro-container .video-bg img.desktop { display: none; } } .portrait .intro-container .video-bg video.initial { /*fix*/ height: clamp(130px, 15vw, 244px); } .portrait .intro-container .video-bg .blackish { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); filter: grayscale(100%) brightness(50%); z-index: 2; } @media (max-width: 767px) { .portrait .intro-container .video-bg .blackish { height: 336px; } } .portrait .intro-container .main-title { position: absolute; bottom: 14%; overflow: hidden; width: 100vw; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; text-align: center; padding: 0 5vh; } html[data-os=macOS] .portrait .intro-container .main-title, html[data-os=iOS] .portrait .intro-container .main-title { bottom: 20%; } .portrait .intro-container .main-title h1 { color: #fff; font-size: 70px; font-family: "Sohne-Schmal"; font-weight: 500; line-height: 0.9; transform: translateY(320px); } @media (min-width: 320px) { .portrait .intro-container .main-title h1 { font-size: 220px; } } @media (min-width: 320px) and (max-width: 1920px) { .portrait .intro-container .main-title h1 { font-size: calc( 70px + (220 - 70) * (( 100vw - 320px ) / (1920 - 320)) ); } } .portrait .scroll-down { position: absolute; bottom: 14vh; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; opacity: 0; display: none; } @media (min-width: 768px) { .portrait .scroll-down { bottom: 6vh; } } .portrait .scroll-down-icon { position: relative; display: grid; place-items: center; width: 30px; height: 43px; border: 2px solid #e8143366; border-radius: 45%; } .portrait .scroll-down-icon:after { content: ""; display: block; position: absolute; width: 8px; height: 8px; border-radius: 50%; background-color: #e81433; -webkit-animation: 2s cubic-bezier(0.37, 0.01, 0, 0.98) infinite wheel-up-down; animation: 2s cubic-bezier(0.37, 0.01, 0, 0.98) infinite wheel-up-down; } @-webkit-keyframes wheel-up-down { 0% { opacity: 0; transform: translateY(-165%) scale(0.8); } 30% { opacity: 1; transform: translateY(-165%) scale(1); } 100% { opacity: 0; transform: translateY(165%) scale(0.8); } } @keyframes wheel-up-down { 0% { opacity: 0; transform: translateY(-165%) scale(0.8); } 30% { opacity: 1; transform: translateY(-165%) scale(1); } 100% { opacity: 0; transform: translateY(165%) scale(0.8); } } .portrait .scroll-down-text { font-family: "Inter", Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 12px; color: #fff; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; text-align: center; margin-top: 20px; } .full-video { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #191919; opacity: 0; z-index: 1; pointer-events: none; } .full-video.active { pointer-events: all; } .full-video video { position: relative; width: 100%; height: 100%; z-index: 3; -o-object-fit: cover; object-fit: cover; aspect-ratio: 16/9; } @media screen and (max-width: 720px) { .full-video video { -o-object-fit: contain; object-fit: contain; } } .full-video .full-video-buttons { position: absolute; top: 40px; right: 50px; opacity: 1; z-index: 4; } @media (max-width: 767px) { .full-video .full-video-buttons { top: 30px; right: 30px; } } .full-video .full-video-buttons button::after, .full-video .full-video-buttons button::before { content: ""; position: absolute; width: 30%; height: 1px; background-color: #ffffff54; transform-origin: center; transition: background-color 300ms ease; } .full-video .full-video-buttons button { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border: 2px solid #ffffff54; border-radius: 50%; display: grid; place-items: center; transition: border 300ms ease; } @media (max-width: 767px) { .full-video .full-video-buttons button { width: 50px; height: 50px; } } .full-video .full-video-buttons button::before { rotate: 45deg; } .full-video .full-video-buttons button::after { rotate: -45deg; } .full-video .full-video-buttons button:hover { border-color: #fff; } .full-video .full-video-buttons button:hover::before { background-color: #fff; } .full-video .full-video-buttons button:hover::after { background-color: #fff; } .full-video .full-video-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 5; } /* Home */ .game-changers { background-color: #191919; overflow: hidden; } @media (min-width: 992px) { .game-changers { padding: 0; } } .game-changers .container-frame { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; pointer-events: none; } @media (min-width: 992px) { .game-changers .container-frame { height: 100vh; } } .game-changers .container-frame .floating-img { position: absolute; top: 0; left: 0; z-index: 0; display: block; height: 29.32vw; width: 18.5vw; overflow: hidden; opacity: 0; } @media (max-width: 767px) { .game-changers .container-frame .floating-img { display: none; } } .game-changers .container-frame .floating-img img { height: 100%; } .game-changers .container-frame .game-changers-smalltext { text-transform: uppercase; letter-spacing: 2px; display: inline-block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-family: "Inter", Arial, Helvetica, sans-serif; font-weight: 600; font-size: 14px; color: #ccc; text-align: center; padding-bottom: 5vh; position: relative; z-index: 2; pointer-events: none; } @media (min-width: 768px) { .game-changers .container-frame .game-changers-smalltext { font-size: 18px; } } @media (min-width: 768px) and (max-width: 1920px) { .game-changers .container-frame .game-changers-smalltext { font-size: calc( 14px + (18 - 14) * (( 100vw - 768px ) / (1920 - 768)) ); } } .game-changers .container-frame .game-changers-bigtext { text-transform: uppercase; max-width: 80vw; font-family: "Tungsten", Arial, Helvetica, sans-serif; font-size: 33px; color: #ffffff; text-align: center; vertical-align: middle; display: inline; position: relative; z-index: 2; pointer-events: none; font-weight: 500; line-height: 1.4; letter-spacing: 1px; } @media (min-width: 320px) { .game-changers .container-frame .game-changers-bigtext { font-size: 61px; } } @media (min-width: 320px) and (max-width: 1920px) { .game-changers .container-frame .game-changers-bigtext { font-size: calc( 33px + (61 - 33) * (( 100vw - 320px ) / (1920 - 320)) ); } } @media (min-width: 1200px) { .game-changers .container-frame .game-changers-bigtext { line-height: 1.3; font-weight: 600; } } .game-changers .container-frame .game-changers-bigtext span { vertical-align: unset; color: #fff; } .game-changers .container-frame .game-changers-bigtext br.desktop { display: none; } @media (min-width: 1200px) { .game-changers .container-frame .game-changers-bigtext br.desktop { display: inline-block; } } .game-changers .container-frame .mobile-floaters { display: none; position: absolute; z-index: 1; width: 100%; height: 100%; } @media (max-width: 767px) { .game-changers .container-frame .mobile-floaters { display: block; } } .game-changers .container-frame .mobile-floaters .floater { position: absolute; width: 33vw; height: auto; } .game-changers .container-frame .mobile-floaters .floater.left { left: 4vh; top: 6%; } .game-changers .container-frame .mobile-floaters .floater.right { right: 3.5vh; bottom: 0; } .game-changers .container-frame .mobile-floaters .hide { display: none; } .chefs-selection { position: relative; padding: 10vh 0 20vh 0; background-color: #f2f2f2; } @media (min-width: 992px) { .chefs-selection { padding: 20vh 0; } } .chefs-selection .marquee-text { position: absolute; z-index: 0; width: 100vw; display: flex; flex-direction: row; right: 0; top: 50%; transform: translateY(-36%); } .chefs-selection .marquee-text span { font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 143px; color: #e80f2e; white-space: nowrap; text-align: justify; text-transform: uppercase; font-weight: normal; } @media (min-width: 768px) { .chefs-selection .marquee-text span { font-size: 250px; } } @media (min-width: 768px) and (max-width: 1920px) { .chefs-selection .marquee-text span { font-size: calc( 143px + (250 - 143) * (( 100vw - 768px ) / (1920 - 768)) ); } } .chefs-selection .chefs-selection-slider { height: 240px; position: relative; } @media (min-width: 992px) { .chefs-selection .chefs-selection-slider { height: 280px; margin-top: 10vh; margin-bottom: 10vh; } } .chefs-selection .chefs-selection-slider .swiper-wrapper .swiper-slide { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; } .chefs-selection .chefs-selection-slider .swiper-wrapper .swiper-slide img { cursor: pointer; max-width: 350px; -o-object-fit: cover; object-fit: cover; pointer-events: none; } @media (min-width: 992px) { .chefs-selection .chefs-selection-slider .swiper-wrapper .swiper-slide img { max-width: 450px; } } @media (min-width: 992px) { .chefs-selection .chefs-selection-slider .swiper-wrapper .swiper-slide img { max-width: 600px; } } .chefs-selection .chefs-selection-slider .swiper-wrapper .swiper-slide img.desktop { display: none; } @media (min-width: 992px) { .chefs-selection .chefs-selection-slider .swiper-wrapper .swiper-slide img.desktop { display: block; } } .chefs-selection .chefs-selection-slider .swiper-wrapper .swiper-slide img.mobile { display: block; } @media (min-width: 992px) { .chefs-selection .chefs-selection-slider .swiper-wrapper .swiper-slide img.mobile { display: none; } } .chefs-selection .container-frame .container .chefs-selection-subtitle { font-family: "Inter"; font-weight: 700; font-size: 12px; color: #999999; text-align: center; display: none; } @media (min-width: 768px) { .chefs-selection .container-frame .container .chefs-selection-subtitle { font-size: 18px; } } @media (min-width: 768px) and (max-width: 1920px) { .chefs-selection .container-frame .container .chefs-selection-subtitle { font-size: calc( 12px + (18 - 12) * (( 100vw - 768px ) / (1920 - 768)) ); } } .chefs-selection .container-frame .container .chefs-selection-title { font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-size: 48px; color: #000; text-align: center; display: block; margin: 0 20px; font-weight: normal; } @media (min-width: 768px) { .chefs-selection .container-frame .container .chefs-selection-title { font-size: 90px; } } @media (min-width: 768px) and (max-width: 1920px) { .chefs-selection .container-frame .container .chefs-selection-title { font-size: calc( 48px + (90 - 48) * (( 100vw - 768px ) / (1920 - 768)) ); } } @media (min-width: 992px) { .chefs-selection .container-frame .container .chefs-selection-title { margin: 0 40px; } } .chefs-selection .container-frame .container .slider-numeration { display: flex; flex-direction: row; justify-content: center; align-items: center; padding-top: 2vh; width: auto; height: auto; position: relative; z-index: 11; } .chefs-selection .container-frame .container .slider-numeration .arrow { display: none; cursor: pointer; } .chefs-selection .container-frame .container .slider-numeration .arrow.right { transform: rotate(180deg); } .chefs-selection .container-frame .container .slider-numeration .numeration-text { font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-size: 54px; color: #6a6767; height: 100%; max-height: 1em; text-align: center; overflow: hidden; margin-left: 0.2em; margin-right: 0.2em; font-weight: normal; } @media (min-width: 768px) { .chefs-selection .container-frame .container .slider-numeration .numeration-text { font-size: 90px; } } @media (min-width: 768px) and (max-width: 1920px) { .chefs-selection .container-frame .container .slider-numeration .numeration-text { font-size: calc( 54px + (90 - 54) * (( 100vw - 768px ) / (1920 - 768)) ); } } .chefs-selection .container-frame .container .slider-numeration .numeration-text.active { color: #fff; } .chefs-selection .container-frame .container .slider-numeration .numeration-text.active .numeration-text-wrapper { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; } .chefs-selection .container-frame .container .slider-numeration .numeration-text.active .numeration-text-wrapper span { height: 100%; max-height: 1em; padding: 0; margin: 0; } .chefs-selection .container-frame .container .slider-numeration hr { width: 2px; height: 5.92vh; margin: 0; border: #343434 1px solid; } .chefs-selection .container-frame .container .slider-info { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; } @media (max-width: 767px) { .chefs-selection .container-frame .container .slider-info { top: 15px; } } @media (min-width: 992px) { .chefs-selection .container-frame .container .slider-info { flex-direction: row; } } .chefs-selection .container-frame .container .slider-info .title-description { text-align: center; margin-top: 1vh; margin-bottom: 30px; width: 100%; } @media (min-width: 992px) { .chefs-selection .container-frame .container .slider-info .title-description { margin: 0; } } .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins { display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; } @media (max-width: 767px) { .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins { position: relative; } } @media (min-width: 992px) { .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins { margin-top: 2vh; } } .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins hr { color: #707070; opacity: 0.36; height: 3em; } .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box { display: flex; flex-direction: column; justify-content: center; padding-inline: 8px; } @media (min-width: 992px) { .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box { padding-inline: 18px; } } .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box .data-number { font-family: "Tungsten"; font-size: 23px; font-size: 15px; font-weight: 600; margin-bottom: 8px; } @media (min-width: 320px) { .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box .data-number { font-size: 30px; } } @media (min-width: 320px) and (max-width: 767px) { .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box .data-number { font-size: calc( 23px + (30 - 23) * (( 100vw - 320px ) / (767 - 320)) ); } } .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box .data-type { font-family: "Tungsten"; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; font-weight: 300; color: #aeaeae; } .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box:last-child { border: 0; } .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box .data-title { font-weight: 700; font-size: 12px; color: #000; } @media (min-width: 768px) { .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box .data-title { font-size: 20px; } } @media (min-width: 768px) and (max-width: 1920px) { .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box .data-title { font-size: calc( 12px + (20 - 12) * (( 100vw - 768px ) / (1920 - 768)) ); } } .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box .data-amount { font-size: 12px; color: #000; display: flex; flex-direction: row; align-items: baseline; justify-content: center; font-weight: 400; } @media (min-width: 768px) { .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box .data-amount { font-size: 20px; } } @media (min-width: 768px) and (max-width: 1920px) { .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box .data-amount { font-size: calc( 12px + (20 - 12) * (( 100vw - 768px ) / (1920 - 768)) ); } } .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box .data-amount .calories { width: auto; } .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box .data-amount .amount-measurement { font-size: 10px; } @media (min-width: 768px) { .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box .data-amount .amount-measurement { font-size: 17px; } } @media (min-width: 768px) and (max-width: 1920px) { .chefs-selection .container-frame .container .slider-info .title-description .calories-proteins .data-box .data-amount .amount-measurement { font-size: calc( 10px + (17 - 10) * (( 100vw - 768px ) / (1920 - 768)) ); } } .chefs-selection .container-frame .container .slider-info .title-description .title { display: block; margin-top: 25px; font-weight: 700; font-size: 20px; color: #e80f2e; text-transform: uppercase; } .chefs-selection .container-frame .container .slider-info .title-description .title span { color: #e80f2e; } .chefs-selection .container-frame .container .slider-info .title-description .description { font-family: "Inter"; font-weight: 400; font-size: 15px; color: #6c6c6c; padding-block: 20px; line-height: 1.5; margin: 0 auto; max-width: 360px; height: 150px; } @media (min-width: 768px) { .chefs-selection .container-frame .container .slider-info .title-description .description { font-size: 18px; } } @media (min-width: 768px) and (max-width: 1920px) { .chefs-selection .container-frame .container .slider-info .title-description .description { font-size: calc( 15px + (18 - 15) * (( 100vw - 768px ) / (1920 - 768)) ); } } @media (min-width: 992px) { .chefs-selection .container-frame .container .slider-info .title-description .description { max-width: 40%; height: 120px; } } .chefs-selection .container-frame .container .slider-info .title-description .description br { display: none; } @media (min-width: 992px) { .chefs-selection .container-frame .container .slider-info .title-description .description br { display: block; } } .chefs-selection .container-frame .container .slider-info .view-more-btn { position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%); } @media (min-width: 992px) { .chefs-selection .container-frame .container .slider-info .view-more-btn { left: 0; bottom: 0; transform: translateX(0%); } } .chefs-selection .container-frame .container .slider-info .view-more-btn .ver-mas { display: flex; align-items: center; justify-content: center; width: 135px; height: 46px; border: 2px solid #E80F2E; border-radius: 30px; transition: background-color 350ms ease; } @media (min-width: 992px) { .chefs-selection .container-frame .container .slider-info .view-more-btn .ver-mas { width: 156px; height: 50px; } } .chefs-selection .container-frame .container .slider-info .view-more-btn .ver-mas span { font-size: 15px; color: #E80F2E; font-weight: 600; text-transform: uppercase; font-family: "Inter", Arial, Helvetica, sans-serif; transition: color 350ms ease; line-height: 0.8; transform: translateY(1px); } @media (min-width: 992px) { .chefs-selection .container-frame .container .slider-info .view-more-btn .ver-mas span { font-size: 17px; font-weight: 700; } } .chefs-selection .container-frame .container .slider-info .view-more-btn .ver-mas:hover { background-color: #E80F2E; } .chefs-selection .container-frame .container .slider-info .view-more-btn .ver-mas:hover span { color: #fff; } .chefs-selection .container-frame .container .slider-info .slider-counter { display: flex; flex-direction: row; align-items: center; justify-content: center; } @media (min-width: 992px) { .chefs-selection .container-frame .container .slider-info .slider-counter { position: absolute; bottom: 0; right: 0; } } .chefs-selection .container-frame .container .slider-info .slider-counter .progress-bar { width: 24vw; max-width: 115px; height: 4px; background-color: #d5d5d5; overflow: hidden; } @media (min-width: 992px) { .chefs-selection .container-frame .container .slider-info .slider-counter .progress-bar { width: 4.42vw; } } .chefs-selection .container-frame .container .slider-info .slider-counter .progress-bar .progress-bar-wrapper { height: 100%; width: 100%; overflow: hidden; position: relative; } .chefs-selection .container-frame .container .slider-info .slider-counter .progress-bar .progress-bar-wrapper .fill { height: 100%; width: 100%; position: absolute; top: 0; left: -80%; background-color: #e80f2e; } .chefs-selection .container-frame .container .slider-info .slider-counter .numeration { display: flex; flex-direction: row; align-items: center; color: #000; font-family: "Inter"; font-weight: 700; font-size: 16px; gap: 12px; } @media (min-width: 768px) { .chefs-selection .container-frame .container .slider-info .slider-counter .numeration { font-size: 18px; } } @media (min-width: 768px) and (max-width: 1920px) { .chefs-selection .container-frame .container .slider-info .slider-counter .numeration { font-size: calc( 16px + (18 - 16) * (( 100vw - 768px ) / (1920 - 768)) ); } } @media (min-width: 992px) { .chefs-selection .container-frame .container .slider-info .slider-counter .numeration { padding-left: 25px; } } .bg-families-video { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; z-index: -10; } .food-families { width: 100vw; height: 100vh; position: relative; } .food-families .food-families-slider { width: 100vw; height: 100vh; position: relative; } .food-families .food-families-slider .slider-backgrounds { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .food-families .food-families-slider .slider-backgrounds img { opacity: 0; } .food-families .food-families-slider .slides { display: flex; flex-direction: row; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 100vw; height: 100vh; } .food-families .food-families-slider .slides .slide-container { min-width: 100vw; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; display: flex; justify-content: center; align-items: center; position: relative; width: 100%; bottom: -40px; } @media (min-width: 992px) { .food-families .food-families-slider .slides .slide-container { padding: 0; } } .food-families .food-families-slider .slides .slide-container .content { display: flex; justify-content: center; align-items: center; width: 100%; } @media (min-width: 992px) { .food-families .food-families-slider .slides .slide-container .content { padding: 0; } } .food-families .food-families-slider .slides .slide-container .content .slide-img { position: absolute; top: 20%; transform: perspective(200px) translateY(-50%); z-index: 99999; height: 48vh; transform-origin: right center; box-shadow: 0 15px 24px rgba(0, 0, 0, 0.22), 0 19px 76px rgba(0, 0, 0, 0.3); opacity: 0; z-index: 0; } @media (max-width: 767px) { html[data-os=macOS] .food-families .food-families-slider .slides .slide-container .content .slide-img, html[data-os=iOS] .food-families .food-families-slider .slides .slide-container .content .slide-img { top: 26%; } } @media (min-width: 992px) { .food-families .food-families-slider .slides .slide-container .content .slide-img { right: 80px; top: 35%; } } @media (min-width: 992px) { .food-families .food-families-slider .slides .slide-container .content .slide-img { left: 30%; top: 0; transform: perspective(200px); height: 54.16vh; } } .food-families .food-families-slider .slides .slide-container .content .slide-img-fake { height: 54.16vh; width: 17.6vw; display: none; } @media (min-width: 992px) { .food-families .food-families-slider .slides .slide-container .content .slide-img-fake { display: block; } } .food-families .food-families-slider .slides .slide-container .content .box-text { display: flex; flex-direction: column; justify-content: center; transform: translateY(100px); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0 30px; } html[data-os=macOS] .food-families .food-families-slider .slides .slide-container .content .box-text, html[data-os=iOS] .food-families .food-families-slider .slides .slide-container .content .box-text { width: 100%; transform: translateY(110px); padding: 0 0 0 26vw; } @media (min-width: 768px) { .food-families .food-families-slider .slides .slide-container .content .box-text { transform: translateY(40px); } } @media (min-width: 992px) { .food-families .food-families-slider .slides .slide-container .content .box-text { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0; } } .food-families .food-families-slider .slides .slide-container .content .box-text .slide-subtitle { font-family: "Inter"; font-weight: 500; font-size: 15px; color: #fff; position: relative; z-index: 15; } @media (min-width: 768px) { .food-families .food-families-slider .slides .slide-container .content .box-text .slide-subtitle { font-size: 20px; } } @media (min-width: 768px) and (max-width: 1920px) { .food-families .food-families-slider .slides .slide-container .content .box-text .slide-subtitle { font-size: calc( 15px + (20 - 15) * (( 100vw - 768px ) / (1920 - 768)) ); } } .food-families .food-families-slider .slides .slide-container .content .box-text .slide-title { font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-size: 70px; color: #fff; padding-top: 2vh; padding-bottom: 1.5vh; position: relative; z-index: 15; font-weight: 500; line-height: 0.9; } @media (min-width: 768px) { .food-families .food-families-slider .slides .slide-container .content .box-text .slide-title { font-size: 140px; } } @media (min-width: 768px) and (max-width: 1920px) { .food-families .food-families-slider .slides .slide-container .content .box-text .slide-title { font-size: calc( 70px + (140 - 70) * (( 100vw - 768px ) / (1920 - 768)) ); } } @media (min-width: 768px) { .food-families .food-families-slider .slides .slide-container .content .box-text .slide-title { padding-bottom: 15px; } } .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn { display: flex; flex-direction: row; align-items: center; position: relative; z-index: 15; pointer-events: all; justify-content: space-between; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-text { font-family: "Inter"; font-weight: 400; font-size: 14px; cursor: pointer; text-transform: uppercase; color: #fff; padding-right: 20px; pointer-events: all; } @media (min-width: 768px) { .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-text { font-size: 16px; } } @media (min-width: 768px) and (max-width: 1920px) { .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-text { font-size: calc( 14px + (16 - 14) * (( 100vw - 768px ) / (1920 - 768)) ); } } @media (min-width: 992px) { .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-text { padding-right: 1.5vw; } } .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-text svg { width: 40%; } .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-text:hover ~ .btn-arrow { background-color: #e80f2e; } .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-text:hover ~ .btn-arrow .arrow-white { left: 50%; } .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-text:hover ~ .btn-arrow .arrow-red { left: 150%; } .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-arrow { width: 45px; height: 45px; max-width: 45px; max-height: 45px; overflow: hidden; border: solid 2px #e80f2e; border-radius: 50%; display: flex; align-items: center; position: relative; cursor: pointer; transition: background-color 0.3s ease-in-out; pointer-events: all; } @media (min-width: 992px) { .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-arrow { width: 65px; height: 65px; max-width: 65px; max-height: 65px; } } .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-arrow:hover { background-color: #e80f2e; } .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-arrow:hover .arrow-white { left: 50%; } .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-arrow:hover .arrow-red { left: 150%; } .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-arrow .arrow-white { position: absolute; top: 50%; left: -50%; transform: translate(-50%, -50%); transition: left 0.3s ease-in-out; } .food-families .food-families-slider .slides .slide-container .content .box-text .slide-btn .btn-arrow .arrow-red { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: left 0.3s ease-in-out; } .food-families .food-families-slider .lower-bar { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100vw; position: absolute; top: 10vh; left: 50%; transform: translateX(-50%); } @media (min-width: 768px) { .food-families .food-families-slider .lower-bar { bottom: 10vh; top: unset; } } @media (min-width: 992px) { .food-families .food-families-slider .lower-bar { bottom: 8vh; } } .food-families .food-families-slider .lower-bar .slider-info { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; width: 70px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media (max-width: 767px) { .food-families .food-families-slider .lower-bar .slider-info { display: none; } } @media (min-width: 992px) { .food-families .food-families-slider .lower-bar .slider-info { flex-direction: row; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } .food-families .food-families-slider .lower-bar .slider-info .progress-bar { width: 70px; height: 2px; background-color: #ffffff9e; overflow: hidden; } .food-families .food-families-slider .lower-bar .slider-info .progress-bar .progress-bar-wrapper { height: 100%; width: 100%; overflow: hidden; position: relative; } .food-families .food-families-slider .lower-bar .slider-info .progress-bar .progress-bar-wrapper .fill { height: 100%; width: 100%; position: absolute; top: 0; left: -100%; background-color: #e80f2e; } .food-families .food-families-slider .lower-bar .slider-info .numeration { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; color: #fff; font-family: "Inter"; font-weight: 700; font-size: 16px; gap: 12px; padding-bottom: 9px; } @media (min-width: 768px) { .food-families .food-families-slider .lower-bar .slider-info .numeration { font-size: 18px; } } @media (min-width: 768px) and (max-width: 1920px) { .food-families .food-families-slider .lower-bar .slider-info .numeration { font-size: calc( 16px + (18 - 16) * (( 100vw - 768px ) / (1920 - 768)) ); } } @media (min-width: 992px) { .food-families .food-families-slider .lower-bar .slider-info .numeration { padding-left: 25px; padding-bottom: 0px; } } .food-families .food-families-slider .lower-bar .slider-info .numeration svg { width: 8px; } .philosophy { background-color: #121212; padding-top: 20vh; } @media (min-width: 992px) { .philosophy { padding: 20vh 0 0 0; } } .philosophy .container-frame .container { display: flex; flex-direction: column; justify-content: center; } .philosophy .container-frame .container .box-title { display: flex; flex-direction: column; align-items: center; margin-bottom: 0px; } @media (min-width: 992px) { .philosophy .container-frame .container .box-title { margin-bottom: 10vh; } } .philosophy .container-frame .container .box-title .tagname { color: #999999; display: block; margin-bottom: 2vh; font-size: 14px; font-weight: 600; padding-bottom: 15px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; letter-spacing: 2px; } @media (min-width: 1200px) { .philosophy .container-frame .container .box-title .tagname { margin-bottom: 5vh; } } @media (min-width: 992px) { .philosophy .container-frame .container .box-title .tagname { font-size: 18px; } } .philosophy .container-frame .container .box-title .title { font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-size: 70px; color: #fff; line-height: 0.9; font-weight: normal; } @media (min-width: 768px) { .philosophy .container-frame .container .box-title .title { font-size: 120px; } } @media (min-width: 768px) and (max-width: 1920px) { .philosophy .container-frame .container .box-title .title { font-size: calc( 70px + (120 - 70) * (( 100vw - 768px ) / (1920 - 768)) ); } } @media (max-width: 767px) { .philosophy .container-frame .container .box-title .title { text-align: center; } } .philosophy .container-frame .container .box-title .title .line { display: inline-block !important; } @media (min-width: 768px) { .philosophy .container-frame .container .box-title .title .line:last-child { margin-left: 20px; } } @media (min-width: 768px) { .philosophy .container-frame .container .box-title .title br.mobile { diplay: none; } } .philosophy .container-frame .container .box-title .title span { display: inline-block; color: #e80f2e; vertical-align: baseline; } .philosophy .container-frame .container .box-title .box-media { display: none; } @media (min-width: 992px) { .philosophy .container-frame .container .box-title .box-media { display: block; margin-top: 10px; } } .philosophy .container-frame .container .box-title .box-media .box-text { color: #cfcfcf; line-height: 1.8; } @media (min-width: 768px) { .philosophy .container-frame .container .box-title .box-media .box-text { max-width: 40vw; } } .philosophy .container-frame .container .box-philosophy { display: flex; flex-direction: column; justify-content: space-between; width: 100%; padding: 0; margin-left: auto; margin-top: 40px; } @media (min-width: 768px) { .philosophy .container-frame .container .box-philosophy { flex-direction: row; max-width: 720px; } } @media (min-width: 1200px) { .philosophy .container-frame .container .box-philosophy { max-width: 865px; margin-top: 175px; } .philosophy .container-frame .container .box-philosophy.right { margin-top: 0; } .philosophy .container-frame .container .box-philosophy.center { max-width: 940px; } } .philosophy .container-frame .container .box-philosophy.about { display: flex; flex-direction: column; } .philosophy .container-frame .container .box-philosophy.about.righty { width: 55%; } @media (min-width: 992px) { .philosophy .container-frame .container .box-philosophy.about.lefty { margin-left: 10vh; } } .philosophy .container-frame .container .box-philosophy.about .top { display: flex; flex-direction: column; } @media (min-width: 768px) { .philosophy .container-frame .container .box-philosophy.about .top { flex-direction: row; } } .philosophy .container-frame .container .box-philosophy.about .top .box-media { width: 100%; max-width: 540px; max-height: 415px; overflow: hidden; } @media (min-width: 768px) { .philosophy .container-frame .container .box-philosophy.about .top .box-media { width: 70%; } } .philosophy .container-frame .container .box-philosophy.about .top .box-media video { width: 100%; } .philosophy .container-frame .container .box-philosophy.about .top .box-text { padding-left: 20px; } @media (max-width: 767px) { .philosophy .container-frame .container .box-philosophy.about .top .box-text { padding-left: 0px; padding-top: 20px; } } .philosophy .container-frame .container .box-philosophy.right { padding: 0; margin-right: 0; } @media (min-width: 992px) { .philosophy .container-frame .container .box-philosophy.right { padding: 75px 0 0 0; } } .philosophy .container-frame .container .box-philosophy.right .box-title { align-items: initial; } .philosophy .container-frame .container .box-philosophy.left { margin-left: 0; } .philosophy .container-frame .container .box-philosophy.center { margin-inline: auto; } .philosophy .container-frame .container .box-philosophy.center .info .box-title.mobile { align-items: baseline; } @media (min-width: 768px) { .philosophy .container-frame .container .box-philosophy.center .info .box-title.mobile { display: none; } } .philosophy .container-frame .container .box-philosophy.center .info .box-title.desktop { display: block; } .philosophy .container-frame .container .box-philosophy .box-media { width: 100%; height: 307px; position: relative; overflow: hidden; } .philosophy .container-frame .container .box-philosophy .box-media video { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media (min-width: 768px) { .philosophy .container-frame .container .box-philosophy .box-media { flex: 1 0 50%; margin-bottom: 0px; } } .philosophy .container-frame .container .box-philosophy .box-media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } @media (min-width: 768px) { .philosophy .container-frame .container .box-philosophy .info { padding: 0 0 0 45px; } } .philosophy .container-frame .container .box-philosophy .box-title { font-family: "Sohne-Schmal"; color: #fff; font-size: 44px; text-align: left; margin-block: 4vw 30px; } @media (min-width: 320px) { .philosophy .container-frame .container .box-philosophy .box-title { font-size: 62px; } } @media (min-width: 320px) and (max-width: 992px) { .philosophy .container-frame .container .box-philosophy .box-title { font-size: calc( 44px + (62 - 44) * (( 100vw - 320px ) / (992 - 320)) ); } } @media (min-width: 768px) { .philosophy .container-frame .container .box-philosophy .box-title { margin-block: 0px; margin-bottom: 30px; } } .philosophy .container-frame .container .box-philosophy .box-text { width: 100%; max-width: 400px; color: #cfcfcf; font-size: 15px; line-height: 1.8; } .philosophy .container-frame .container .box-philosophy .copy { color: #595959; font-size: 11px; width: 100%; display: block; margin-top: 20px; font-weight: 600; } .philosophy .container-frame .container .text-container { display: flex; flex-direction: column; justify-content: center; margin: 20vh 0 10vh 0; } .philosophy .container-frame .container .text-container .title { font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-size: 40px; color: #fff; line-height: 0.9; font-weight: normal; text-align: center; } @media (min-width: 320px) { .philosophy .container-frame .container .text-container .title { font-size: 84px; } } @media (min-width: 320px) and (max-width: 1920px) { .philosophy .container-frame .container .text-container .title { font-size: calc( 40px + (84 - 40) * (( 100vw - 320px ) / (1920 - 320)) ); } } .philosophy .container-frame .container .text-container .title span { color: #e80f2e; vertical-align: baseline; } .philosophy .container-frame .container .text-container .copy { color: #999; display: block; margin-top: 3vh; font-size: 15px; line-height: 1.3; text-align: center; } .philosophy .marquee-text { z-index: 0; width: 100vw; display: flex; flex-direction: row; } @media (min-width: 992px) { .philosophy .marquee-text { margin: 10vh 0; padding: 0 0; } } .philosophy .marquee-text span { font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-size: 68px; color: #fff; white-space: nowrap; text-align: justify; text-transform: uppercase; font-weight: normal; } @media (min-width: 768px) { .philosophy .marquee-text span { font-size: 140px; } } @media (min-width: 768px) and (max-width: 1920px) { .philosophy .marquee-text span { font-size: calc( 68px + (140 - 68) * (( 100vw - 768px ) / (1920 - 768)) ); } } .philosophy .about-bottom-button { display: flex; justify-content: center; align-items: center; margin: 60px auto 90px auto; } .philosophy .about-bottom-button a { display: flex; align-items: center; justify-content: center; text-transform: uppercase; font-family: "Inter", Arial, Helvetica, sans-serif; width: 135px; height: 45px; color: #ff003e; border: 2px solid #ff003e; border-radius: 30px; font-weight: 600; font-size: 15px; transition: color 350ms ease, background-color 350ms ease; } .philosophy .about-bottom-button a:hover { background-color: #ff003e; color: #fff; } .philosophy .box-full-video { position: relative; width: 100%; height: 100vh; overflow: hidden; margin-top: 10vh; } .philosophy .box-full-video.about { cursor: pointer; } .philosophy .box-full-video img, .philosophy .box-full-video video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; margin: 0 auto; transform: scale(0.4); transform-origin: top; margin: 0 auto; } @media (min-width: 992px) { .philosophy .box-full-video img, .philosophy .box-full-video video { height: auto; } } .philosophy .box-full-video img.mobile, .philosophy .box-full-video video.mobile { display: block; } @media (min-width: 768px) { .philosophy .box-full-video img.mobile, .philosophy .box-full-video video.mobile { display: none; } } .philosophy .box-full-video img.desktop, .philosophy .box-full-video video.desktop { display: block; } @media (max-width: 767px) { .philosophy .box-full-video img.desktop, .philosophy .box-full-video video.desktop { display: none; } } .philosophy .box-full-video .play-button-container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; } @media (min-width: 768px) { .philosophy .box-full-video .play-button-container { display: none; } } .philosophy .box-full-video .play-button-container .play-button { position: relative; width: 100px; height: 100px; border-radius: 50%; background-color: #ff003e42; } .philosophy .box-full-video .play-button-container .play-button::before { content: ""; display: block; position: absolute; top: 50%; left: 41px; transform: translateY(-50%); border-width: 15px 0 15px 25px; border-color: transparent transparent transparent #fff; z-index: 5; border-style: solid; } .location { background-color: #f2f2f2; padding: 10vh 0; } @media (min-width: 768px) { .location { padding: 20vh 0; } } .location .container-frame .container { max-width: 1250px; } .location .container-frame .container .location-title { display: flex; flex-direction: column; font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-size: 60px; color: #000; position: relative; width: 100%; text-align: center; white-space: nowrap; margin-bottom: 6vh; font-weight: normal; } @media (min-width: 768px) { .location .container-frame .container .location-title { font-size: 340px; } } @media (min-width: 768px) and (max-width: 1920px) { .location .container-frame .container .location-title { font-size: calc( 60px + (340 - 60) * (( 100vw - 768px ) / (1920 - 768)) ); } } @media (min-width: 992px) { .location .container-frame .container .location-title { margin-bottom: 10vh; } } .location .container-frame .container .location-title svg { width: 100%; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .location .container-frame .container .location-title .tagname { color: #777; display: block; margin-inline: auto; margin-bottom: 20px; font-size: 15px; font-weight: 500; letter-spacing: 0.6px; padding-bottom: 15px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-family: "Inter"; } .location .container-frame .container .location-title .location-subtitle { flex-direction: row; justify-content: space-between; position: absolute; width: 100%; margin-top: 4vh; } .location .container-frame .container .location-title .location-subtitle.spotify { position: static; display: flex; justify-content: center; } .location .container-frame .container .location-title .location-subtitle.spotify .button-primary svg { width: 60px; height: 60px; } @media (min-width: 768px) { .location .container-frame .container .location-title .location-subtitle.spotify .button-primary svg { width: 80px; height: 80px; } } @media (max-width: 767px) { .location .container-frame .container .location-title .location-subtitle.spotify .button-primary a { flex-direction: row-reverse; justify-content: center; } .location .container-frame .container .location-title .location-subtitle.spotify .button-primary a .container-magnetic { padding: 20px 20px 20px 0px; } } .location .container-frame .container .location-title .location-subtitle.spotify .button-primary a span { font-family: "Inter"; font-weight: 500; font-size: 14px; color: #777; padding-bottom: 10px; border-bottom: 1px solid #ff003e; } @media (min-width: 768px) { .location .container-frame .container .location-title .location-subtitle.spotify .button-primary a span { font-size: 16px; border-bottom: none; padding-bottom: 0px; } } @media (min-width: 992px) { .location .container-frame .container .location-title .location-subtitle { display: flex; } } .location .container-frame .container .location-title .location-subtitle .item-container { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; display: flex; align-items: center; } .location .container-frame .container .location-title .location-subtitle .item-container a { font-family: "Inter"; font-weight: 400; font-size: 15px; text-decoration: none; padding-bottom: 5px; color: #000; } .location .container-frame .container .location-title .location-subtitle .item-container svg { width: auto; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin: 0 10px; } .location .container-frame .container .location-subtitle.maps { display: flex; flex-direction: column; justify-content: center; padding-top: 12vh; } @media (min-width: 768px) { .location .container-frame .container .location-subtitle.maps { align-items: center; gap: 10px; } } .location .container-frame .container .location-subtitle.maps .top { display: flex; flex-direction: column; } @media (min-width: 768px) { .location .container-frame .container .location-subtitle.maps .top { flex-direction: row; gap: 20px; } } .location .container-frame .container .location-subtitle.maps .top .button-primary { margin-top: 0px; margin-bottom: 50px; } .location .container-frame .container .location-subtitle.maps .top .button-primary svg { width: 60px; height: 60px; } @media (min-width: 768px) { .location .container-frame .container .location-subtitle.maps .top .button-primary svg { width: 80px; height: 80px; } } .location .container-frame .container .location-subtitle.maps .top .button-primary span { text-align: center; line-height: 20px; letter-spacing: 0px; } .location .container-frame .container .location-subtitle.maps .top address { font-style: normal; text-align: center; margin-block: 4vh 5vh; line-height: 25px; color: #606060; font-weight: 600; } @media (min-width: 768px) { .location .container-frame .container .location-subtitle.maps .top address { margin-block: auto; } } .location .container-frame .container .location-subtitle.maps .top address span { vertical-align: baseline; } .location .container-frame .container .location-subtitle.maps .bottom { display: flex; flex-direction: column; } .location .container-frame .container .location-subtitle.maps .bottom .button-simple { margin-inline: auto; } .location .container-frame .container .location-subtitle.maps .bottom .button-simple:before { content: ""; display: block; width: 100%; height: 1px; } .location .container-frame .container .location-subtitle.maps .bottom .button-simple span { font-family: "Inter"; font-weight: 500; } .location .location-slider { height: 377px; position: relative; } @media (min-width: 768px) { .location .location-slider { height: 100%; } } .location .location-slider .swiper-wrapper { width: 100%; height: 100%; } .location .location-slider .swiper-wrapper .swiper-slide { height: 100%; width: 600px; max-width: 377px; } @media (min-width: 768px) { .location .location-slider .swiper-wrapper .swiper-slide { max-width: 1166px; } } .location .location-slider .swiper-wrapper .swiper-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .location .location-slider .swiper-scrollbar { left: 50%; transform: translateX(-50%); bottom: -12%; width: 80%; height: 2px; } @media (min-width: 768px) { .location .location-slider .swiper-scrollbar { bottom: -8%; } } .location .location-slider .swiper-scrollbar .swiper-scrollbar-drag { background-color: #E80F2E; } .fitness-station { background-color: #f2f2f2; position: relative; padding: 10vh 0; } .fitness-station .container-frame .container { position: relative; padding-bottom: 10%; max-width: 1250px; } .fitness-station .container-frame .container hr { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; border: 1px solid #707070; display: none; } @media (min-width: 992px) { .fitness-station .container-frame .container hr { display: block; } } .fitness-station .container-frame .container .fitness-station-title { padding-top: 5%; font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-size: 60px; color: #000; position: relative; width: 100%; text-align: center; white-space: nowrap; font-weight: normal; } @media (min-width: 768px) { .fitness-station .container-frame .container .fitness-station-title { font-size: 340px; } } @media (min-width: 768px) and (max-width: 1920px) { .fitness-station .container-frame .container .fitness-station-title { font-size: calc( 60px + (340 - 60) * (( 100vw - 768px ) / (1920 - 768)) ); } } .fitness-station .container-frame .container .fitness-station-title svg { width: 100%; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .fitness-station .container-frame .container .fitness-station-title span { width: 100%; display: inline-block; } .fitness-station .container-frame .container .fitness-station-title .fitness-station-subtitle { display: none; flex-direction: row; justify-content: space-between; position: absolute; width: 100%; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin-top: 4vh; } @media (min-width: 992px) { .fitness-station .container-frame .container .fitness-station-title .fitness-station-subtitle { display: flex; } } .fitness-station .container-frame .container .fitness-station-title .fitness-station-subtitle .item-container { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; display: flex; align-items: center; } .fitness-station .container-frame .container .fitness-station-title .fitness-station-subtitle .item-container a { font-family: "Inter"; font-weight: 600; font-size: 15px; text-decoration: none; padding-bottom: 10px; color: #000; } .fitness-station .container-frame .container .fitness-station-content { display: flex; flex-direction: column; padding-top: 8%; justify-content: space-between; width: 100%; } @media (min-width: 992px) { .fitness-station .container-frame .container .fitness-station-content { flex-direction: row; } } .fitness-station .container-frame .container .fitness-station-content .column { width: 100%; } @media (min-width: 992px) { .fitness-station .container-frame .container .fitness-station-content .column { width: 45%; } } .fitness-station .container-frame .container .fitness-station-content .column.left img { width: 100%; } .fitness-station .container-frame .container .fitness-station-content .column.right .paragraph { font-family: "Recoleta"; font-weight: 400; font-size: 24px; color: #000; line-height: 1.3; padding-bottom: 1em; width: 100%; border-bottom: 1px solid #707070; margin-top: 60px; } @media (min-width: 768px) { .fitness-station .container-frame .container .fitness-station-content .column.right .paragraph { font-size: 40px; } } @media (min-width: 768px) and (max-width: 1920px) { .fitness-station .container-frame .container .fitness-station-content .column.right .paragraph { font-size: calc( 24px + (40 - 24) * (( 100vw - 768px ) / (1920 - 768)) ); } } .fitness-station .container-frame .container .fitness-station-content .column.right .information { padding-top: 3em; display: flex; flex-direction: row; } @media (min-width: 992px) { .fitness-station .container-frame .container .fitness-station-content .column.right .information { justify-content: space-between; } } .fitness-station .container-frame .container .fitness-station-content .column.right .information .mobile { display: none; } @media (min-width: 992px) { .fitness-station .container-frame .container .fitness-station-content .column.right .information .mobile { display: block; } } .fitness-station .container-frame .container .fitness-station-content .column.right .information .information-column { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .fitness-station .container-frame .container .fitness-station-content .column.right .information .information-column .section-title { font-family: "Inter"; font-weight: 600; font-size: 16px; color: #000; } @media (min-width: 768px) { .fitness-station .container-frame .container .fitness-station-content .column.right .information .information-column .section-title { font-size: 24px; } } @media (min-width: 768px) and (max-width: 1920px) { .fitness-station .container-frame .container .fitness-station-content .column.right .information .information-column .section-title { font-size: calc( 16px + (24 - 16) * (( 100vw - 768px ) / (1920 - 768)) ); } } .fitness-station .container-frame .container .fitness-station-content .column.right .information .information-column.right { display: flex; flex-direction: column; } @media (min-width: 992px) { .fitness-station .container-frame .container .fitness-station-content .column.right .information .information-column.right { padding-left: 4.89vw; } } .fitness-station .container-frame .container .fitness-station-content .column.right .information .information-column.right .section-info { font-family: "Inter"; font-weight: 400; font-size: 16px; color: #aaaaaa; padding-top: 1em; padding-bottom: 1em; line-height: 1.2; } @media (min-width: 768px) { .fitness-station .container-frame .container .fitness-station-content .column.right .information .information-column.right .section-info { font-size: 24px; } } @media (min-width: 768px) and (max-width: 1920px) { .fitness-station .container-frame .container .fitness-station-content .column.right .information .information-column.right .section-info { font-size: calc( 16px + (24 - 16) * (( 100vw - 768px ) / (1920 - 768)) ); } } .fitness-station .container-frame .container .fitness-station-content .column.right .spotify { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-top: 3.24%; } .fitness-station .container-frame .container .fitness-station-content .column.right .spotify svg { transform: translateY(-5px); } .fitness-station .container-frame .container .fitness-station-content .column.right .spotify .spotiy-text { color: #000; text-decoration: none; margin-left: 5.6px; padding-bottom: 11px; font-family: "Inter"; font-weight: 400; font-size: 16px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; border-bottom: 1px solid #000; white-space: nowrap; } @media (min-width: 768px) { .fitness-station .container-frame .container .fitness-station-content .column.right .spotify .spotiy-text { font-size: 24px; } } @media (min-width: 768px) and (max-width: 1400px) { .fitness-station .container-frame .container .fitness-station-content .column.right .spotify .spotiy-text { font-size: calc( 16px + (24 - 16) * (( 100vw - 768px ) / (1400 - 768)) ); } } .mobile-app { background-color: #000; width: 100vw; height: 100vh; position: relative; background-image: url(../images/design/mobile-app-responsive.6c297f.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } @media (min-width: 992px) { .mobile-app { background-image: url(../images/design/mobile-app.5067ae.jpg); } } .mobile-app .mobile-app-content { text-align: center; } @media (min-width: 992px) { .mobile-app .mobile-app-content { position: absolute; left: 56%; top: 33.84%; text-align: left; } } .mobile-app .mobile-app-content .mobile-app-title { font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12vh; color: #fff; line-height: 9.72vh; } .mobile-app .mobile-app-content .mobile-app-title span { color: #e80f2e; } .mobile-app .mobile-app-content .mobile-app-subtitle { padding-top: 4.36%; font-family: "Inter"; font-weight: 400; font-size: 1.38vh; color: #888888; padding-bottom: 7.03%; line-height: 2.22vh; } .mobile-app .mobile-app-content .mobile-app-links { display: flex; flex-direction: row; justify-content: center; } @media (min-width: 992px) { .mobile-app .mobile-app-content .mobile-app-links { justify-content: flex-start; } } .mobile-app .mobile-app-content .mobile-app-links a:first-of-type { margin-right: 18.8px; } .section-delivery { padding: 90px 0; background-color: #fff; } @media (min-width: 768px) { .section-delivery { padding: 190px 0; } } .section-delivery .box-delivery { display: flex; align-items: center; justify-content: center; flex-direction: column; } .section-delivery .box-delivery .tagname { display: flex; align-items: center; font-family: "Inter", Arial, Helvetica, sans-serif; font-size: 15px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; color: #4D4D4D; gap: 5px; } @media (min-width: 320px) { .section-delivery .box-delivery .tagname { font-size: 21px; } } @media (min-width: 320px) and (max-width: 1400px) { .section-delivery .box-delivery .tagname { font-size: calc( 15px + (21 - 15) * (( 100vw - 320px ) / (1400 - 320)) ); } } .section-delivery .box-delivery .tagname img { height: 15px; } .section-delivery .box-delivery h1 { font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-size: 50px; color: #121212; text-transform: uppercase; margin: 25px 0 10px 0; text-align: center; } @media (min-width: 320px) { .section-delivery .box-delivery h1 { font-size: 130px; } } @media (min-width: 320px) and (max-width: 1920px) { .section-delivery .box-delivery h1 { font-size: calc( 50px + (130 - 50) * (( 100vw - 320px ) / (1920 - 320)) ); } } .section-delivery .box-delivery p { font-family: "Inter", Arial, Helvetica, sans-serif; color: #4D4D4D; line-height: 1.6; font-size: 16px; text-align: center; margin-bottom: 40px; max-width: 34vw; } @media (max-width: 767px) { .section-delivery .box-delivery p { color: #6c6c6c; font-size: 15px; line-height: 1.8; max-width: 360px; } } .section-delivery .box-delivery .delivery-buttons { display: flex; align-items: center; justify-content: center; gap: 15px; } .section-delivery .box-delivery .delivery-buttons .delivery-btn { display: flex; align-items: center; justify-content: center; width: 134px; height: 50px; border-radius: 30px; background-color: #fff; border: 2px solid red; transition: background-color 450ms cubic-bezier(0.15, 0.65, 0.53, 1.02), color 450ms cubic-bezier(0.15, 0.65, 0.53, 1.02); } .section-delivery .box-delivery .delivery-buttons .delivery-btn.rappi svg { height: 22px; } .section-delivery .box-delivery .delivery-buttons .delivery-btn.pedidos-ya svg { height: 40px; } .section-delivery .box-delivery .delivery-buttons .delivery-btn svg { color: #ff003e; transition: fill 300ms ease; } .section-delivery .box-delivery .delivery-buttons .delivery-btn:hover { background-color: #ff003e; } .section-delivery .box-delivery .delivery-buttons .delivery-btn:hover svg { color: #fff; } .section-delivery .box-delivery .delivery-buttons .delivery-btn:last-child { padding: 0 20px; } /* Menu */ .products-grid { position: relative; background-color: #f1f1f1; padding: 5vh 0 20vh 0; } @media (max-width: 767px) { .products-grid { padding: 0 0 20vh 0; } } .products-grid .filters { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; *height: 90px; padding-top: 5vh; padding-bottom: 3vh; padding-left: 36px; padding-right: 36px; margin: 0 auto; line-height: 1.6; max-width: 1440px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; overflow-x: scroll; *overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; } .products-grid .filters::-webkit-scrollbar { display: none; } html[data-device=mobile] .products-grid .filters, html[data-device=tablet] .products-grid .filters { width: 100%; flex-wrap: nowrap; justify-content: flex-start; } html[data-device=mobile] .products-grid .filters:before, html[data-device=tablet] .products-grid .filters:before { content: ""; display: block; position: absolute; left: 0; width: 36px; height: 40px; background: #f1f1f1; background: linear-gradient(90deg, #f1f1f1 10%, rgba(241, 241, 241, 0) 100%); z-index: 1; pointer-events: none; } html[data-device=mobile] .products-grid .filters:after, html[data-device=tablet] .products-grid .filters:after { content: ""; display: block; position: absolute; right: 0; width: 36px; height: 40px; background: #f1f1f1; background: linear-gradient(90deg, rgba(241, 241, 241, 0) 0%, #f1f1f1 90%); z-index: 1; pointer-events: none; } @media (min-width: 992px) { html[data-device=mobile] .products-grid .filters::before, html[data-device=mobile] .products-grid .filters::after, html[data-device=tablet] .products-grid .filters::before, html[data-device=tablet] .products-grid .filters::after { display: none; } } .products-grid .filters .filter-category { position: relative; font-family: "Inter", Arial, Helvetica, sans-serif; font-weight: 600; font-size: 14px; color: #000; padding-bottom: 9px; text-transform: uppercase; white-space: nowrap; transition: all 0.4s ease-in-out; cursor: pointer; } @media (min-width: 300px) { .products-grid .filters .filter-category { font-size: 20px; } } @media (min-width: 300px) and (max-width: 1400px) { .products-grid .filters .filter-category { font-size: calc( 14px + (20 - 14) * (( 100vw - 300px ) / (1400 - 300)) ); } } .products-grid .filters .filter-category:before { content: ""; height: 2px; width: 0%; position: absolute; bottom: 2px; left: 0; background-color: #e80f2e; transition: all 0.4s ease-in-out; } .products-grid .filters .filter-category.active::before { width: 100%; } .products-grid .filters .dot-spacer { width: 6px; height: 6px; display: inline-block; margin: 0 20px; margin-bottom: 9px; } .products-grid .filters .dot-spacer .circle { width: 6px; height: 6px; background-color: #e80f2e; border-radius: 10px; } @media (max-width: 767px) { .products-grid .filters .dot-spacer { margin: 0 10px 11px 10px; } } .products-grid .container-frame .container { position: relative; } .products-grid .container-frame .container .products-grid-wrapper { display: grid; grid-template-columns: 1fr; margin: 0 auto; gap: 10vh; width: 100%; margin: auto; } @media (max-width: 767px) { .products-grid .container-frame .container .products-grid-wrapper { width: auto; gap: 10px; } } @media (min-width: 768px) { .products-grid .container-frame .container .products-grid-wrapper { grid-template-columns: repeat(2, 1fr); gap: 5vh; } } @media (min-width: 1200px) { .products-grid .container-frame .container .products-grid-wrapper { grid-template-columns: repeat(3, 1fr); } } .products-grid .container-frame .container .products-grid-wrapper .product-card { width: 100%; max-width: 360px; min-width: 285px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 0 auto; } .products-grid .container-frame .container .products-grid-wrapper .product-card .product-card-img { transition: scale 0.5s cubic-bezier(0.37, 0.01, 0, 0.98); } html[data-device=desktop] .products-grid .container-frame .container .products-grid-wrapper .product-card:hover .product-card-img { scale: 1.035; } .products-grid .container-frame .container .products-grid-wrapper .product-card img { display: block; width: 100%; max-width: 270px; margin: 0 auto; } @media (min-width: 992px) { .products-grid .container-frame .container .products-grid-wrapper .product-card img { width: 86%; margin-bottom: 16px; } } .products-grid .container-frame .container .products-grid-wrapper .product-card .card-title { font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-size: 40px; color: #ff2039; display: block; text-align: center; letter-spacing: 1px; text-transform: uppercase; font-weight: normal; } @media (min-width: 768px) { .products-grid .container-frame .container .products-grid-wrapper .product-card .card-title { font-size: 40px; } } @media (min-width: 768px) and (max-width: 1920px) { .products-grid .container-frame .container .products-grid-wrapper .product-card .card-title { font-size: calc( 40px + (40 - 40) * (( 100vw - 768px ) / (1920 - 768)) ); } } .products-grid .container-frame .container .products-grid-wrapper .product-card .protein-amount { font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-size: 20px; color: #000; display: block; text-align: center; padding-top: 0.5em; letter-spacing: 2px; font-weight: normal; } @media (min-width: 768px) { .products-grid .container-frame .container .products-grid-wrapper .product-card .protein-amount { font-size: 20px; } } @media (min-width: 768px) and (max-width: 1920px) { .products-grid .container-frame .container .products-grid-wrapper .product-card .protein-amount { font-size: calc( 20px + (20 - 20) * (( 100vw - 768px ) / (1920 - 768)) ); } } .products-grid .container-frame .container .products-grid-wrapper .product-card .card-description { font-family: "Inter"; font-weight: 400; font-size: 13px; color: #8d8d8d; line-height: 1.5em; text-align: center; padding-top: 10px; width: 100%; margin: 0 auto; } @media (min-width: 768px) { .products-grid .container-frame .container .products-grid-wrapper .product-card .card-description { font-size: 13px; } } @media (min-width: 768px) and (max-width: 1920px) { .products-grid .container-frame .container .products-grid-wrapper .product-card .card-description { font-size: calc( 13px + (13 - 13) * (( 100vw - 768px ) / (1920 - 768)) ); } } @media screen and (max-width: 730px) { .products-grid .container-frame .container .products-grid-wrapper .product-card .card-description { height: auto; } } .products-grid .container-frame .container .products-grid-wrapper .product-card .card-info { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; margin: auto auto 0 auto; padding-top: 10px; gap: 10px; } @media screen and (min-width: 735px) { .products-grid .container-frame .container .products-grid-wrapper .product-card .card-info { width: 95%; } } .products-grid .container-frame .container .products-grid-wrapper .product-card .card-info .info-section.disabled { opacity: 0; } .products-grid .container-frame .container .products-grid-wrapper .product-card .card-info .info-section .info-amount { display: block; font-family: "Tungsten", Arial, Helvetica, sans-serif; font-size: 27px; color: #000; text-align: center; font-weight: bold; margin-bottom: 5px; } @media (min-width: 768px) { .products-grid .container-frame .container .products-grid-wrapper .product-card .card-info .info-section .info-amount { font-size: 27px; } } @media (min-width: 768px) and (max-width: 1920px) { .products-grid .container-frame .container .products-grid-wrapper .product-card .card-info .info-section .info-amount { font-size: calc( 27px + (27 - 27) * (( 100vw - 768px ) / (1920 - 768)) ); } } .products-grid .container-frame .container .products-grid-wrapper .product-card .card-info .info-section .info-category { display: block; font-family: "Tungsten", Arial, Helvetica, sans-serif; font-size: 15px; color: #000; opacity: 0.34; text-align: center; font-weight: lighter; letter-spacing: 2px; } @media (min-width: 768px) { .products-grid .container-frame .container .products-grid-wrapper .product-card .card-info .info-section .info-category { font-size: 15px; } } @media (min-width: 768px) and (max-width: 1920px) { .products-grid .container-frame .container .products-grid-wrapper .product-card .card-info .info-section .info-category { font-size: calc( 15px + (15 - 15) * (( 100vw - 768px ) / (1920 - 768)) ); } } .products-grid .container-frame .container .products-grid-wrapper .product-card .card-info hr { width: 1px; height: 3em; *border: 1px solid #707070; opacity: 0.36; background-color: #707070; } /* Global */ .navigation { position: fixed; z-index: 1000; width: 100%; top: 0; left: 0; pointer-events: none; opacity: 0; padding: 18px 20px 18px 20px; transition: opacity 300ms ease; background-color: #121212; transition: background-color 300ms ease; } @media (min-width: 992px) { .navigation { padding: 24px 0; } } .navigation.isOnTop { background-color: transparent; } @media (min-width: 1200px) { .navigation .container { padding: 0vh 3vw; } } .navigation.active ul li { pointer-events: all; } .navigation.video-active { top: -100px !important; pointer-events: "none" !important; } .navigation.go-out { display: none; } .navigation ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .navigation ul .logo { display: flex; align-items: center; cursor: pointer; color: transparent; width: 110px; } .navigation ul .logo svg { width: 100%; } .navigation ul .right { display: flex; flex-direction: row; align-items: center; } .navigation ul .right .nav-item { display: none; } @media (min-width: 1200px) { .navigation ul .right .nav-item { display: block; } } .navigation ul .right .nav-item button, .navigation ul .right .nav-item a { padding: 8px; } .navigation ul .right .nav-item button span, .navigation ul .right .nav-item a span { font-size: 12px; font-family: "Inter", Arial, Helvetica, sans-serif; font-weight: 600; color: #fff; text-transform: uppercase; transition: color 300ms ease; } .navigation ul .right .nav-item button:hover span, .navigation ul .right .nav-item a:hover span { color: #E80F2E; } .navigation ul .right .nav-item button:last-child, .navigation ul .right .nav-item a:last-child { margin-right: 8px; } .navigation ul .right .separador { display: none; height: 20px; width: 1px; background-color: #fff; margin-right: 20px; opacity: 0.5; } @media (min-width: 1200px) { .navigation ul .right .separador { display: block; } } .navigation ul .right .pedidos-ya-nav { width: 98px; margin-right: 20px; } .navigation ul .right .rappi-nav { width: 57px; margin-right: 20px; } .navigation ul .right .rappi-nav a { color: inherit; } .navigation ul .right .pedidos-ya-nav, .navigation ul .right .rappi-nav { display: none; } @media (min-width: 768px) { .navigation ul .right .pedidos-ya-nav, .navigation ul .right .rappi-nav { display: block; } .navigation ul .right .pedidos-ya-nav svg, .navigation ul .right .rappi-nav svg { fill: #fff; width: 100%; height: 100%; } } .navigation ul .right .language { display: flex; flex-direction: row; align-items: center; height: 100%; padding-right: 46px; } .navigation ul .right .language span { color: #fff; font-size: 15px; font-family: "Inter", Arial, Helvetica, sans-serif; font-weight: 600; cursor: pointer; position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .navigation ul .right .language span.active::before { content: ""; width: 100%; height: 2px; left: 0; bottom: -8px; position: absolute; background-color: #e80f2e; } .navigation ul .right .language hr { height: 16px; margin: 0 16px; width: 1px; border: 0.5px solid #888888; } .navigation ul .right .burger-button { display: flex; flex-direction: column; align-items: flex-end; cursor: pointer; width: 35px; scale: 0.9; } @media (min-width: 1200px) { .navigation ul .right .burger-button { display: none; } } .navigation ul .right .burger-button .bar.menuOpen { background-color: #fff !important; } .navigation ul .right .burger-button.closed div:nth-of-type(3) { width: 20px; transition: width 0.3s ease-in-out; margin-bottom: 0; } .navigation ul .right .burger-button.closed:hover div:nth-of-type(3) { width: 35px; } .navigation ul .right .burger-button.closed:hover div:nth-of-type(2) { -webkit-animation: hideLeftshowRight 500ms ease-in-out; animation: hideLeftshowRight 500ms ease-in-out; } .navigation ul .right .burger-button.closed:hover div:nth-of-type(1) { -webkit-animation: hideLeftshowRight 500ms ease-in-out 150ms; animation: hideLeftshowRight 500ms ease-in-out 150ms; } .navigation ul .right .burger-button div { width: 35px; height: 3px; background-color: #fff; margin-bottom: 6px; } .navigation ul .right .burger-button div.menu-open { background-color: #fff !important; } .navigation ul .right .nav-menu-button { display: none; } @media (min-width: 1200px) { .navigation ul .right .nav-menu-button { display: block; } } .navigation ul .right .nav-menu-button a { display: flex; align-items: center; justify-content: center; width: 109px; height: 36px; border-radius: 18px; font-family: "Inter", Arial, Helvetica, sans-serif; font-weight: 600; font-size: 12px; color: #fff; text-transform: uppercase; background-color: #E80F2E; } @-webkit-keyframes hideLeftshowRight { 0% { margin-right: auto; width: 35px; } 25% { width: 0px; } 50% { margin-right: 0px; } 75% { width: 35px; } } @keyframes hideLeftshowRight { 0% { margin-right: auto; width: 35px; } 25% { width: 0px; } 50% { margin-right: 0px; } 75% { width: 35px; } } @-webkit-keyframes hideRightshowLeft { 0% { margin-left: auto; width: 35px; } 25% { width: 0px; } 50% { margin-left: 0px; } 75% { width: 35px; } } @keyframes hideRightshowLeft { 0% { margin-left: auto; width: 35px; } 25% { width: 0px; } 50% { margin-left: 0px; } 75% { width: 35px; } } #pointer { position: absolute; width: 100px; height: 100px; pointer-events: none; z-index: 99999; top: 50%; left: 50%; opacity: 0; } #pointer .main-circle { position: absolute; top: 50%; transform: scale(1) translateY(-50%); left: 0; right: 0; margin: 0 auto; width: 10px; height: 10px; background: #ff003d; border: 2px solid transparent; border-radius: 50%; transition: all 0.5s cubic-bezier(0.37, 0.01, 0, 0.98); } #pointer .main-circle .inner-text { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } #pointer .main-circle .inner-text span { display: inline-block; text-align: center; opacity: 0; font-size: 0; color: #fff; vertical-align: baseline; font-weight: 500; line-height: 1.2; transform: translateY(2px); transition: opacity 0.3s ease-out; } #pointer .arrows { position: absolute; top: 50%; transform: scale(1) translateY(-50%); left: 0; right: 0; margin: 0 auto; width: 39px; color: #ff003d; transition: all 0.5s cubic-bezier(0.37, 0.01, 0, 0.98); display: flex; opacity: 0; justify-content: space-between; } #pointer .arrows i { font-size: 25px; } #pointer .draggable { text-align: center; position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translatey(-50%); } #pointer .draggable .drag-circle { fill: transparent; stroke: #ff003d; stroke-width: 2px; stroke-dasharray: 60; transition: all 1s cubic-bezier(0.37, 0.01, 0, 0.98), stroke-dasharray 1.5s 0.1s cubic-bezier(0.37, 0.01, 0, 0.98); stroke-dashoffset: 0; opacity: 0; transform: scale(0) rotate(0); transform-origin: center; } #pointer .wrapper-play { position: relative; width: 100%; height: 100%; } #pointer .wrapper-play .circle-dashed { position: absolute; top: 50%; left: 50%; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.5); transform-origin: center; transition: all 0.3s ease; } #pointer .wrapper-play .circle-dashed circle { transform-origin: center; -webkit-animation: rotating 6s linear infinite; animation: rotating 6s linear infinite; } #pointer .wrapper-play .ic-play { position: absolute; top: 50%; left: 50%; opacity: 0; color: #ff003d; transition: all 0.3s ease; transform: translate3d(-38%, -50%, 0) scale(0); } #pointer .text { position: absolute; bottom: 0; left: 50%; width: 200px; color: #fff; font-family: "Gotham-Medium", Arial, Helvetica, sans-serif; font-size: 10px; text-align: center; font-weight: 100; letter-spacing: 0; transition: all 0.3s; transform: translateX(-50%); opacity: 0; } #pointer .text span { position: relative; background: #111; padding: 5px 8px; white-space: nowrap; } #pointer.on-play-video { /*.circle-dashed { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); } */ } #pointer.on-play-video .main-circle { transition: all 0.3s; width: 124px; height: 124px; background-color: rgba(255, 255, 255, 0.15); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #pointer.on-play-video .wrapper-play .ic-play { display: none; opacity: 1; transform: translate3d(-42%, -50%, 0) scale(0.8); } #pointer.on-play-video .text { bottom: -10px !important; } #pointer.active .main-circle { transition: all 0.3s; opacity: 0.4; width: 60px; height: 60px; } #pointer.active-with-text .main-circle { transition: all 0.3s; opacity: 0.9; width: 124px; height: 124px; padding: 10px; } #pointer.active-with-text .main-circle .inner-text span { opacity: 1; font-size: 12px; } #pointer.drag .main-circle { width: 0; height: 0; } #pointer.drag .arrows { width: 80px; opacity: 1; transition-delay: 0.2s; } #pointer.drag .draggable .drag-circle { stroke-dasharray: 200; opacity: 1; transform: scale(1) rotate(280deg); } #pointer.display-text .text { opacity: 1; bottom: 20px; } #pointer.display-text.on-hover .text { bottom: 0; } #pointer.hide:not(.on-hover) .text, #pointer.drag .text { opacity: 0; bottom: 10px; transition-delay: 0s; } #pointer .loading { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; transition: all 0.5s; opacity: 0; text-align: center; } #pointer .loading .loader { text-align: center; } #pointer .loading svg { width: 25px; height: 35px; margin-top: 2px; } body.loading #pointer .main-circle { opacity: 0; } body.loading #pointer .loading { opacity: 1; } @-webkit-keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } img.three { width: 100%; display: block; opacity: 0; } #container { height: 100vh; width: 100vw; position: absolute; z-index: -1; top: 0; left: 0; pointer-events: none; } #container canvas { height: 100%; width: 100%; } .pin-spacer { pointer-events: none; } .footer { z-index: 15; background-color: #fff; width: 100%; max-width: 100%; position: relative; } @media (min-width: 1200px) { .footer { height: 100vh; background-image: url(../images/design/footer-bg.659ccf.jpg); background-size: contain; background-position: right; background-repeat: no-repeat; } } .footer .footer-bg { position: absolute; z-index: -1; top: 30%; height: 500px; width: 680px; left: 25%; } @media (min-width: 768px) { .footer .footer-bg { top: 62%; transform: translateY(-50%); left: 53%; } } @media screen and (min-width: 630px) { .footer .footer-bg { top: 36%; } } @media (min-width: 1200px) { .footer .footer-bg { display: none; left: 65%; bottom: 18%; } } .footer .footer-bg img { width: 100%; } .footer .container-frame { height: 100%; } .footer .container-frame .container { position: relative; height: 100%; padding: 10vh 0px 2% 0px; } @media (min-width: 768px) { .footer .container-frame .container { padding: 15vh 0px 2% 0px; } } .footer .container-frame .container .footer-tag { font-family: "Inter"; font-weight: 500; letter-spacing: 0.6px; color: #777; font-size: 14px; } @media (min-width: 768px) { .footer .container-frame .container .footer-tag { font-size: 20px; } } @media (min-width: 768px) and (max-width: 1920px) { .footer .container-frame .container .footer-tag { font-size: calc( 14px + (20 - 14) * (( 100vw - 768px ) / (1920 - 768)) ); } } .footer .container-frame .container .subscribe { font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 86px; color: #000; font-weight: normal; margin-block: 20px 30px; } @media (min-width: 768px) { .footer .container-frame .container .subscribe { font-size: 260px; } } @media (min-width: 768px) and (max-width: 1920px) { .footer .container-frame .container .subscribe { font-size: calc( 86px + (260 - 86) * (( 100vw - 768px ) / (1920 - 768)) ); } } @media (min-width: 768px) { .footer .container-frame .container .subscribe { max-width: 60vw; margin-block: 34px 30px; } } @media (min-width: 1200px) { .footer .container-frame .container .subscribe { font-size: 260px; width: 60vw; max-width: 935px; margin-bottom: 100px; } } @media (min-width: 1200px) { .footer .container-frame .container .subscribe-form { width: 935px; } } .footer .container-frame .container .subscribe-form .label { display: none; font-family: "Inter"; font-weight: 500; font-size: 12px; color: #000; } @media (min-width: 768px) { .footer .container-frame .container .subscribe-form .label { font-size: 20px; } } @media (min-width: 768px) and (max-width: 1920px) { .footer .container-frame .container .subscribe-form .label { font-size: calc( 12px + (20 - 12) * (( 100vw - 768px ) / (1920 - 768)) ); } } @media (min-width: 768px) { .footer .container-frame .container .subscribe-form .label { display: block; } } .footer .container-frame .container .subscribe-form .subscribe-form-wrapper { display: flex; flex-direction: row; align-items: center; border-bottom: 2px solid #777; width: 100%; max-width: 595px; padding-bottom: 1.25%; } @media (min-width: 768px) { .footer .container-frame .container .subscribe-form .subscribe-form-wrapper { width: 60vw; max-width: 935px; padding-top: 35px; } } .footer .container-frame .container .subscribe-form .subscribe-form-wrapper .email { background: none; border: none; color: #000; font-family: "Inter"; font-weight: 400; padding: 10px 0; font-size: 15px; width: 85%; } @media (min-width: 768px) { .footer .container-frame .container .subscribe-form .subscribe-form-wrapper .email { font-size: 22px; } } @media (min-width: 768px) and (max-width: 1920px) { .footer .container-frame .container .subscribe-form .subscribe-form-wrapper .email { font-size: calc( 15px + (22 - 15) * (( 100vw - 768px ) / (1920 - 768)) ); } } .footer .container-frame .container .subscribe-form .subscribe-form-wrapper .email::-moz-placeholder { font-family: "Inter"; font-weight: 400; font-size: 15px; color: #777; } .footer .container-frame .container .subscribe-form .subscribe-form-wrapper .email:-ms-input-placeholder { font-family: "Inter"; font-weight: 400; font-size: 15px; color: #777; } .footer .container-frame .container .subscribe-form .subscribe-form-wrapper .email::placeholder { font-family: "Inter"; font-weight: 400; font-size: 15px; color: #777; } @media (min-width: 768px) { .footer .container-frame .container .subscribe-form .subscribe-form-wrapper .email::-moz-placeholder { font-size: 22px; } .footer .container-frame .container .subscribe-form .subscribe-form-wrapper .email:-ms-input-placeholder { font-size: 22px; } .footer .container-frame .container .subscribe-form .subscribe-form-wrapper .email::placeholder { font-size: 22px; } } @media (min-width: 768px) and (max-width: 1920px) { .footer .container-frame .container .subscribe-form .subscribe-form-wrapper .email::-moz-placeholder { font-size: calc( 15px + (22 - 15) * (( 100vw - 768px ) / (1920 - 768)) ); } .footer .container-frame .container .subscribe-form .subscribe-form-wrapper .email:-ms-input-placeholder { font-size: calc( 15px + (22 - 15) * (( 100vw - 768px ) / (1920 - 768)) ); } .footer .container-frame .container .subscribe-form .subscribe-form-wrapper .email::placeholder { font-size: calc( 15px + (22 - 15) * (( 100vw - 768px ) / (1920 - 768)) ); } } .footer .container-frame .container .subscribe-form .subscribe-form-wrapper .send { background: none; border: none; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNy40MDgiIGhlaWdodD0iMTkuNTE2IiB2aWV3Qm94PSIwIDAgMjcuNDA4IDE5LjUxNiI+DQogIDxnIGlkPSJHcnVwb182NzA4IiBkYXRhLW5hbWU9IkdydXBvIDY3MDgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuNTc2IDEuMjM2KSI+DQogICAgPGxpbmUgaWQ9IkzDrW5lYV8xMDIiIGRhdGEtbmFtZT0iTMOtbmVhIDEwMiIgeDI9IjIzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjQyNCA4LjU4KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjA2MDYwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPg0KICAgIDxwYXRoIGlkPSJUcmF6YWRvXzM1MTUiIGRhdGEtbmFtZT0iVHJhemFkbyAzNTE1IiBkPSJNLTE3NjMxLTIyMzk0Ljg1OWw4LjM0Ni04LjM0NC04LjM0Ni04LjM0NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTc2NDguMDcgMjI0MTEuNzI1KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjA2MDYwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPg0KICA8L2c+DQo8L3N2Zz4NCg==); background-position: center; background-size: contain; background-repeat: no-repeat; color: transparent; cursor: pointer; width: 30px; height: 20px; margin-left: auto; padding-inline: 0; } @media (min-width: 1200px) { .footer .container-frame .container .subscribe-form .subscribe-form-wrapper .send { width: 35px; height: 24px; } } .footer .container-frame .container .footer-links { padding: 40px 0; display: flex; flex-direction: column; justify-content: left; white-space: nowrap; } @media (min-width: 768px) { .footer .container-frame .container .footer-links { width: 460px; flex-flow: wrap; gap: 40px; padding-top: 5vh; } } @media (min-width: 1200px) { .footer .container-frame .container .footer-links { width: 650px; flex-flow: row; gap: 35px; } } .footer .container-frame .container .footer-links .column-header { margin-bottom: 20px; font-weight: 500; } @media (min-width: 768px) { .footer .container-frame .container .footer-links .column-header { margin-bottom: 28px; } } .footer .container-frame .container .footer-links.mobile { display: block; } @media (min-width: 992px) { .footer .container-frame .container .footer-links.mobile { display: none; } } .footer .container-frame .container .footer-links.desktop { display: none; } @media (min-width: 992px) { .footer .container-frame .container .footer-links.desktop { display: flex; } } .footer .container-frame .container .footer-links .footer-links-column { display: flex; flex-direction: column; padding-right: 4%; margin-top: 12px; } .footer .container-frame .container .footer-links .footer-links-column:first-child { margin-top: 0px; } .footer .container-frame .container .footer-links .footer-links-column.col-proteina { display: none; } @media (min-width: 768px) { .footer .container-frame .container .footer-links .footer-links-column.col-proteina { display: flex; } } @media (max-width: 767px) { .footer .container-frame .container .footer-links .footer-links-column { margin-bottom: 4vh; } } @media (min-width: 768px) { .footer .container-frame .container .footer-links .footer-links-column { margin-top: 0px; flex: 1 0 40%; } } @media (min-width: 1200px) { .footer .container-frame .container .footer-links .footer-links-column { flex: 1 0 auto; } } .footer .container-frame .container .footer-links .footer-links-column .footer-link { color: #777; font-family: "Inter", Arial, Helvetica, sans-serif; font-weight: 500; text-decoration: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding-bottom: 10px; font-size: 15px; display: flex; align-items: center; } .footer .container-frame .container .footer-links .footer-links-column .footer-link a { color: inherit; } .footer .container-frame .container .footer-links .footer-links-column .footer-link.rappi { width: 60px; } .footer .container-frame .container .footer-links .footer-links-column .footer-link.rappi svg { fill: #777; } .footer .container-frame .container .footer-links .footer-links-column .footer-link.pedidos-ya-footer { width: 92px; } .footer .container-frame .container .footer-links .footer-links-column .footer-link.pedidos-ya-footer svg { width: 100%; height: 100%; fill: #777; } .footer .container-frame .container .footer-links .footer-links-column .footer-link svg { margin-right: 8px; } .footer .container-frame .container .footer-links .footer-links-column .footer-link.hoverable { cursor: pointer; transition: color 0.2s ease-in-out; } .footer .container-frame .container .footer-links .footer-links-column .footer-link.hoverable:hover { color: #777; } .footer .container-frame .container .footer-links .footer-links-column .footer-link.double { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .footer .container-frame .container .footer-links .footer-links-column .footer-link.double p { padding: 0; margin: 0; } .footer .container-frame .container .footer-links .footer-links-column .footer-link.double hr { border: 1px solid #707070; width: 40px; height: 1px; margin: 0 14px; } .footer .copyright { font-weight: 300; font-size: 13px; color: #999; padding-top: 2vh; border-top: 1px solid #999; width: 100%; height: 65px; } @media (min-width: 1024px) { .footer .copyright { font-size: 18px; } } @media (min-width: 1024px) and (max-width: 1600px) { .footer .copyright { font-size: calc( 13px + (18 - 13) * (( 100vw - 1024px ) / (1600 - 1024)) ); } } @media screen and (max-width: 428px) { .footer .copyright { height: 150px; padding: 10px 0 50px 0; } } @media (min-width: 1200px) { .footer .copyright { align-items: center; } } .footer .copyright .info { display: flex; flex-direction: column-reverse; justify-content: space-between; } .footer .copyright .siteby { width: 100%; line-height: 1.5; } .footer .copyright .siteby img { display: inline-block; width: 25px; margin-right: 10px; } @media (max-width: 767px) { .footer .copyright .siteby img { display: none; } } .footer .copyright .siteby .mobile { vertical-align: baseline; display: none; } @media (min-width: 768px) { .footer .copyright .siteby .mobile { display: inline-flex; } } .footer .copyright .box-content { display: flex; align-items: flex-end; justify-content: space-between; position: relative; width: 100%; } @media screen and (max-width: 428px) { .footer .copyright .box-content { height: 100%; } } @media (min-width: 1200px) { .footer .copyright .box-content { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; } } .footer .copyright .box-content .siteby { position: absolute; top: 0; left: 0; max-width: 500px; } @media (min-width: 1200px) { .footer .copyright .box-content .siteby { position: static; width: 500px; } } .footer .copyright .box-content .text { display: flex; align-items: center; } .footer .copyright .box-content .text b { color: #666; margin-left: 0; } .footer .copyright .box-content .text .kid-agency { color: #606060; } @media (min-width: 1200px) { .footer .copyright .box-content .text.kid { position: absolute; left: 50%; transform: translateX(-50%); } .footer .copyright .box-content .text.kid b { font-weight: 600; } } .footer .copyright .box-content .go-top { transition: all 0.3s ease-out; display: block; } @media (min-width: 768px) { .footer .copyright .box-content .go-top { display: flex; align-items: center; cursor: pointer; } } .footer .copyright .box-content .go-top .btn { width: 40px; height: 40px; border: 1px solid #777; border-radius: 50%; display: grid; place-items: center; } @media (min-width: 1200px) { .footer .copyright .box-content .go-top .btn { border: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: flex; align-items: center; } } .footer .copyright .box-content .go-top .btn .text { display: none; } @media (min-width: 1200px) { .footer .copyright .box-content .go-top .btn .text { display: inline-flex; } } @media (min-width: 1200px) { .footer .copyright .box-content .go-top .btn svg { margin-left: 10px; } } .footer .copyright .box-content .go-top svg path, .footer .copyright .box-content .go-top svg line { stroke: #000; } .footer .copyright .box-content .go-top:hover { color: #000; } .g-noise { width: 100%; height: 100%; position: fixed; left: 0; top: 0; pointer-events: none; z-index: 99999; opacity: 0.3; overflow: hidden; } .g-noise:after { content: ""; width: calc(100% + 20rem); height: calc(100% + 20rem); background-image: url(../images/design/grain.946637.webp); background-position: 50%; position: absolute; left: -10rem; top: -10rem; will-change: transform; -webkit-animation: noise 1s steps(2) infinite; animation: noise 1s steps(2) infinite; } @-webkit-keyframes noise { 0% { transform: translate3d(0, 9rem, 0); } 10% { transform: translate3d(-1rem, -4rem, 0); } 20% { transform: translate3d(-8rem, 2rem, 0); } 30% { transform: translate3d(9rem, -9rem, 0); } 40% { transform: translate3d(-2rem, 7rem, 0); } 50% { transform: translate3d(-9rem, -4rem, 0); } 60% { transform: translate3d(2rem, 6rem, 0); } 70% { transform: translate3d(7rem, -8rem, 0); } 80% { transform: translate3d(-9rem, 1rem, 0); } 90% { transform: translate3d(6rem, -5rem, 0); } to { transform: translate3d(-7rem, 0, 0); } } @keyframes noise { 0% { transform: translate3d(0, 9rem, 0); } 10% { transform: translate3d(-1rem, -4rem, 0); } 20% { transform: translate3d(-8rem, 2rem, 0); } 30% { transform: translate3d(9rem, -9rem, 0); } 40% { transform: translate3d(-2rem, 7rem, 0); } 50% { transform: translate3d(-9rem, -4rem, 0); } 60% { transform: translate3d(2rem, 6rem, 0); } 70% { transform: translate3d(7rem, -8rem, 0); } 80% { transform: translate3d(-9rem, 1rem, 0); } 90% { transform: translate3d(6rem, -5rem, 0); } to { transform: translate3d(-7rem, 0, 0); } } .g-position-bar { position: fixed; left: 15px; top: 50%; z-index: 2; transform: translateY(-50%); height: 190px; width: 2px; opacity: 0; pointer-events: none; display: none; } @media (min-width: 1600px) { .g-position-bar { left: 3vw; } } .g-position-bar .wrapper { width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.2); position: relative; z-index: 1; } .g-position-bar .wrapper .progress { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 0; background-color: #ff003d; } .loader-container { position: absolute; z-index: 2; bottom: 4.7vh; left: 50%; transform: translateX(-50%); flex-direction: row; justify-content: center; align-items: center; display: none; flex-wrap: wrap; width: 90%; margin: 0 auto; } .loader-container.active { display: flex; } .loader-container .copyright { font-family: "Inter"; font-weight: 600; font-size: 0.9vh; color: #666666; line-height: 1.5; width: 100%; order: 3; max-width: 200px; text-align: center; margin: 0 auto; margin-top: 5vh; } @media (min-width: 992px) { .loader-container .copyright { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; order: 1; max-width: none; margin: 0; text-align: center; } } .loader-container .copyright br { display: none; } @media (min-width: 992px) { .loader-container .copyright br { display: block; } } .loader-container .loading-bar { display: none; width: 90%; height: 2px; background-color: #454545; overflow: hidden; order: 1; } @media (min-width: 992px) { .loader-container .loading-bar { order: 2; width: 70%; } } @media (min-width: 1600px) { .loader-container .loading-bar { width: 80%; } } .loader-container .loading-bar .loading-bar-wrapper { width: 0; height: 100%; background-color: #888888; } .loader-container .progress { display: none; flex-direction: row; justify-content: flex-start; align-items: flex-end; font-family: "Inter"; font-weight: 600; color: #fff; order: 2; } @media (min-width: 992px) { .loader-container .progress { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; order: 3; } } .loader-container .progress .progress-number { font-size: 1.85vh; } .loader-container .progress .percentage { font-size: 1.11vh; } .navigation-menu-2 { width: 100vw; height: 100vh; background-color: #121212; display: none; flex-direction: row; align-items: center; position: fixed; z-index: 5; opacity: 0; top: 0; right: 0; transform-origin: top right; } .navigation-menu-2.active { display: flex; opacity: 1; } .navigation-menu-2 .column { height: 100%; } .navigation-menu-2 .column.left { width: 100%; position: relative; margin: 0 auto; height: 677px; padding: 0 36px 10vh 36px; display: grid; } @media (min-width: 1200px) { .navigation-menu-2 .column.left { padding-left: 11.33vw; padding-bottom: 0; width: 50%; } } @media (min-width: 1600px) { .navigation-menu-2 .column.left { padding-left: 8.33vw; } } .navigation-menu-2 .column.left .nav-links { align-self: flex-end; } .navigation-menu-2 .column.left .nav-links.active { pointer-events: all; } .navigation-menu-2 .column.left .nav-links li { max-height: -webkit-fit-content; max-height: -moz-fit-content; max-height: fit-content; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; overflow: hidden; padding-bottom: 2vh; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .navigation-menu-2 .column.left .nav-links li:first-child { margin-top: 40px; } .navigation-menu-2 .column.left .nav-links li:last-of-type { padding: 0; } .navigation-menu-2 .column.left .nav-links li a { text-decoration: none; color: #fff; font-family: "Sohne-Schmal", Arial, Helvetica, sans-serif; font-size: 60px; transition: 0.1s color ease-in-out; display: block; font-weight: normal; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); } @media (min-width: 320px) { .navigation-menu-2 .column.left .nav-links li a { font-size: 130px; } } @media (min-width: 320px) and (max-width: 1920px) { .navigation-menu-2 .column.left .nav-links li a { font-size: calc( 60px + (130 - 60) * (( 100vw - 320px ) / (1920 - 320)) ); } } .navigation-menu-2 .column.left .nav-links li a:hover { color: #ff003d; } .navigation-menu-2 .column.left .menu-footer { display: flex; flex-direction: row; align-self: flex-end; } html[data-os=macOS] .navigation-menu-2 .column.left .menu-footer, html[data-os=iOS] .navigation-menu-2 .column.left .menu-footer { align-self: center; } .navigation-menu-2 .column.left .menu-footer .follow-us .delivery h5 { font-size: 17px; font-family: "Inter", Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: 600; color: #ccc; margin-bottom: 20px; } .navigation-menu-2 .column.left .menu-footer .follow-us .delivery .delivery-links { display: flex; gap: 15px; margin-bottom: 50px; } .navigation-menu-2 .column.left .menu-footer .follow-us .delivery .delivery-links .delivery-link { display: flex; align-items: center; height: 45px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 10px 20px; border-radius: 30px; border: 1px solid #fff; } .navigation-menu-2 .column.left .menu-footer .follow-us .delivery .delivery-links .delivery-link svg { color: #ccc; } .navigation-menu-2 .column.left .menu-footer .follow-us .delivery .delivery-links .delivery-link:nth-child(1) svg { width: 48px; height: 20px; } .navigation-menu-2 .column.left .menu-footer .follow-us .delivery .delivery-links .delivery-link:nth-child(2) svg { width: 85px; height: 25px; } .navigation-menu-2 .column.left .menu-footer .follow-us .follow { display: flex; align-items: center; margin-bottom: 25px; overflow: hidden; } .navigation-menu-2 .column.left .menu-footer .follow-us .follow span { display: block; color: #ccc; text-transform: uppercase; font-family: "Inter", Arial, Helvetica, sans-serif; font-weight: 600; font-size: 17px; margin-right: 22px; } .navigation-menu-2 .column.left .menu-footer .follow-us .follow .follow-redes { display: flex; align-items: center; gap: 20px; } .navigation-menu-2 .column.left .menu-footer .follow-us .follow .follow-redes .red a { display: block; width: 20px; height: 20px; } .navigation-menu-2 .column.left .menu-footer .follow-us .follow .follow-redes .red a img { width: 100%; } .navigation-menu-2 .column.left .menu-footer .follow-us .redes ul { display: flex; align-items: center; } .navigation-menu-2 .column.left .menu-footer .follow-us .redes ul .red { display: grid; width: 20px; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; margin-right: 12px; overflow: hidden; } @media (min-width: 768px) { .navigation-menu-2 .column.left .menu-footer .follow-us .redes ul .red { width: 21px; height: 21px; margin-right: 10px; } } .navigation-menu-2 .column.left .menu-footer .follow-us .redes ul .red.pedidos-ya-menu { width: 85px; } .navigation-menu-2 .column.left .menu-footer .follow-us .redes ul .red.rappi { width: 50px; } .navigation-menu-2 .column.left .menu-footer .follow-us .redes ul .red img { width: 100%; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); } .navigation-menu-2 .column.left .menu-footer .follow-us .redes ul .red svg { width: 100%; height: 100%; fill: #636363; color: #636363; } .navigation-menu-2 .column.right { display: none; align-content: center; justify-items: flex-end; width: 50%; } @media (min-width: 1200px) { .navigation-menu-2 .column.right { display: grid; } } .navigation-menu-2 .column.right .img-container { position: relative; width: 564px; height: 677px; overflow: hidden; } .navigation-menu-2 .column.right .img-container .img-slide { position: absolute; width: 100%; height: 100%; } .navigation-menu-2 .column.right .img-container .img-slide .slide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; z-index: 1; } .navigation-menu-2 .column.right .img-container .img-slide .slide.active { z-index: 2; } .transition { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 999999999999; background-color: #000; opacity: 0; pointer-events: none; } .button-primary { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 80px; display: flex; align-items: center; } @media (max-width: 767px) { .button-primary { margin-top: 25px; } } @media (min-width: 768px) { .button-primary { height: 100px; } } .button-primary.inverted a { flex-direction: row-reverse; } .button-primary.inverted .container-magnetic { padding: 20px 20px 20px 0; } .button-primary a { display: flex; justify-content: flex-start; align-items: center; z-index: 1; } @media (max-width: 767px) { .button-primary a { flex-direction: column; } } .button-primary span { color: var(--dark); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; z-index: 0; font-weight: 400; color: #666666; } @media (min-width: 992px) { .button-primary span { font-size: 16px; } } .button-primary .container-magnetic { display: flex; position: relative; justify-content: center; align-items: center; padding: 20px; } .button-primary .container-magnetic.magnetic-category { padding: 0; } .button-primary svg { width: 60px; height: 60px; } .button-primary svg .circle { fill: transparent; transition: all 0.4s ease-out; } .button-primary svg .arrow { transition: all 0.4s ease-out; } .button-primary svg .whatsapp-logo { transition: all 0.4s ease-out; } .button-primary svg path { transition: all 0.4s ease-in-out; } .button-primary svg circle { fill: transparent; transition: all 0.4s ease-in-out; } @media (min-width: 768px) { .button-primary svg { width: 80px; height: 80px; } } .button-primary:hover svg .circle { fill: var(--primary-color); } .button-primary:hover svg circle { fill: #e80f2e; } .button-primary:hover svg #logo-maps, .button-primary:hover svg .logo-ig path, .button-primary:hover svg #Spotify_logo_without_text { fill: #fff; } .button-form { padding: 20px 0; background-color: var(--primary-color); width: 100%; text-align: center; border: 1px solid var(--primary-color); color: #fff; transition: all 0.4s ease-in-out; } .button-form:hover { background-color: #00186b; border: 1px solid #00186b; } .button-simple { position: relative; display: inline-block; cursor: pointer; padding-bottom: 10px; overflow: hidden; color: #fff; vertical-align: baseline; } .button-simple.button-menu { color: #fff; } .button-simple span { color: #fff; vertical-align: baseline; font-weight: 400; } .button-simple::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #fff; transition: all 0.75s ease-out; transform: translateX(-250%); } .button-simple::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #fff; transition: all 0.75s ease-out; transform: translateX(0); } .button-simple.gray span { color: #4d4d4d; } .button-simple.gray::before, .button-simple.gray::after { background-color: #4d4d4d; } .button-simple.red span { color: #4d4d4d; } .button-simple.red::before, .button-simple.red::after { background-color: #e80f2e; } .button-simple:hover::before { transform: translateX(0); } .button-simple:hover::after { transform: translateX(250%); } .button-simple.button-menu::before { background-color: #555; } .button-simple.button-menu::after { display: none; } .button-simple.primary-color span { color: #000; } .button-simple.primary-color::before, .button-simple.primary-color::after { background-color: #e80f2e; } .o-scroll { position: relative; min-height: 100%; z-index: 1; } main { min-height: 100%; } html.has-scroll-smooth { overflow: hidden; position: fixed; left: 0; right: 0; top: 0; bottom: 0; } body { background-color: #000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100vw; height: 100vh; overflow: hidden; font-family: "Inter", Arial, Helvetica, sans-serif; font-weight: 400; }