@charset "UTF-8"; /** * @internal Template * @author Benjamin Retel - rbCREATION [https://www.rbcreation.fr] * @copyright (c) 2018 - Today. All rights reserved. */ /* Ubuntu (default) */ /*@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,400italic,600,600italic,700");*/ /* Roboto */ /* Roboto loaded via in (parallel, non render-blocking) */ /*@import url("https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700");*/ /* Icons: Material Design */ /* Material Icons removed — using inline SVG icons */ /* -------------------- */ :root { --color-default: #252525; --color-primary: #F5792B; /*--color-primary: #E57939;*/ /*--color-primary: #ff9100;*/ --color-secondary: #ffcf00; --color-tertiary: #cfcfcf; --color-black: #000000; --color-white: #ffffff; --color-gray-50: #fbfbfb; --color-gray-100: #f6f6f6; --color-gray-200: #f1f1f1; --color-gray-300: #e4e4e4; --color-gray-400: #c2c2c2; --color-gray-500: #a3a3a3; --color-gray-600: #7a7a7a; --color-gray-700: #666666; --color-gray-800: #464646; --color-gray-900: #252525; --color-info: #0066cc; --color-warning: #ff3300; --color-muted: #bebebe; --color-error: #cc0000; --color-success: #009900; --font-family-default: "Roboto", sans-serif; --font-size-default: 16px; --font-weight-thin: 100; --font-weight-extra-light: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semi-bold: 600; --font-weight-bold: 700; --font-weight-extra-bold: 800; --font-weight-black: 900; --background-error: #ffdddd; --background-info: #cceeff; --background-success: #ddffdd; --box-shadow-lv1: 1px 1px 5px 0px rgba(000, 000, 000, 0.1); --box-shadow-lv2: 1px 1px 10px 0px rgba(000, 000, 000, 0.2); --box-shadow-internal-lv1: 1px 1px 5px 0px rgba(000, 000, 000, 0.1) inset; --box-shadow-internal-lv2: 1px 1px 10px 0px rgba(000, 000, 000, 0.2) inset; --transition-button: all 0.1s linear; --transition-link: all 0.1s linear; --transition-responsive: all 0.2s linear; --size-1: 2px; --size-2: 4px; --size-3: 8px; --size-4: 16px; --size-5: 32px; --size-6: 64px; --height-site-header: 64px; --width-menu-button: 40px; --height-menu-button: 40px; --max-width-main-body: 960px; --breakpoint-xl: 960px; } /* -------------------- */ *, *::before, *::after { box-sizing: border-box; } /* -------------------- */ html { height: 100%; /* Font size for rem unity : 16px*62.5/100=10px */ /* Ex : 1rem = 10px, 1.4rem = 14px */ /*font-size: 62.5%;*/ } body { height: 100%; font-family: var(--font-family-default); font-size: var(--font-size-default); font-weight: var(--font-weight-normal); font-style: normal; color: var(--color-default); text-align: center; background: var(--color-white); /*background: url('../img/bg.png') repeat;*/ /*background: var(--color-gray-900);*/ padding: 0; margin: 0 auto; } /* -------------------- */ .grid { display: grid !important; } /* -------------------- */ .d-flex { display: flex !important; } /* -------------------- */ .flex-row { flex-direction: row !important; } .flex-column { flex-direction: column !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; } /* -------------------- */ .justify-content-start { justify-content: flex-start !important; } .justify-content-end { justify-content: flex-end !important; } .justify-content-center { justify-content: center !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-around { justify-content: space-around !important; } .justify-content-evenly { justify-content: space-evenly !important; } /* -------------------- */ .align-items-start { align-items: flex-start !important; } .align-items-end { align-items: flex-end !important; } .align-items-center { align-items: center !important; } .align-items-baseline { align-items: baseline !important; } .align-items-stretch { align-items: stretch !important; } /* -------------------- */ .row { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; width: 100%; } /* -------------------- */ .col { flex: 1; } .col-auto { width: auto; } .col-1 { width: calc(100% * (1/12)); } .col-2 { width: calc(100% * (2/12)); } .col-3 { width: calc(100% * (3/12)); } .col-4 { width: calc(100% * (4/12)); } .col-5 { width: calc(100% * (5/12)); } .col-6 { width: calc(100% * (6/12)); } .col-7 { width: calc(100% * (7/12)); } .col-8 { width: calc(100% * (8/12)); } .col-9 { width: calc(100% * (9/12)); } .col-10 { width: calc(100% * (10/12)); } .col-11 { width: calc(100% * (11/12)); } .col-12 { width: calc(100% * (12/12)); } /* -------------------- */ .w-auto { width: auto !important; } .w-25 { width: 25% !important; } .w-50 { width: 50% !important; } .w-75 { width: 75% !important; } .w-100 { width: 100% !important; } /* -------------------- */ .maxw-480px { max-width: 480px !important; } /* -------------------- */ .h-auto { height: auto !important; } .h-25 { height: 25% !important; } .h-50 { height: 50% !important; } .h-75 { height: 75% !important; } .h-100 { height: 100% !important; } /* -------------------- */ .leading-icon, .trailing-icon { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; } /* -------------------- */ a, article, h1, h2, h3, h4, h5, h6, header, img, li, p, nav, section, span, ul { word-wrap: break-word; margin: 0; padding: 0; } /* -------------------- */ a, a:link, a:visited, a:hover { font-family: var(--font-family-default); font-weight: var(--font-weight-normal); color: var(--color-primary); text-decoration: underline; cursor: pointer; } a:hover { opacity: 0.75; } /* -------------------- */ h3 + p { margin-top: var(--size-2); } /* -------------------- */ img { border-width: 0; border-style: none; list-style-type: none; line-height: 0; } /* -------------------- */ li { list-style: none; text-align: left; } /* -------------------- */ p { text-align: left; } p + p { margin-top: var(--size-2); } /* -------------------- */ .button-group { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; } /* -------------------- */ button.btn, a.btn { position: relative; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; min-width: 36px; height: 36px; font-family: var(--font-family-default); font-weight: var(--font-weight-bold); font-size: var(--font-size-default); color: var(--color-white); text-decoration: none; background: var(--color-primary); border: none; border-radius: var(--size-2); box-shadow: 1px 1px 3px 0 rgba(000, 000, 000, 0.1); padding: 0 var(--size-4); cursor: pointer; transition: var(--transition-button); } button.btn:hover, a.btn:hover { opacity: 0.75; } button.btn > .text, a.btn > .text { margin-left: 8px; } button.btn > .leading-icon > .material-icons, a.btn > .leading-icon > .material-icons { font-size: 24px; } .btn-primary { color: var(--color-white) !important; background: var(--color-primary) !important; } .btn-warning { color: var(--color-white) !important; background: var(--color-warning) !important; } /* -------------------- */ input, select, textarea { display: block; font-family: var(--font-family-default); font-size: var(--font-size-default); color: var(--color-black); background-color: transparent; outline: none; border: none; } /* -------------------- */ .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -------------------- */ .p-0 { padding: 0 !important; } .p-1 { padding: var(--size-1) !important; } .p-2 { padding: var(--size-2) !important; } .p-3 { padding: var(--size-3) !important; } .p-4 { padding: var(--size-4) !important; } .p-5 { padding: var(--size-5) !important; } .p-6 { padding: var(--size-6) !important; } /* -------------------- */ .pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: var(--size-1) !important; } .pt-2 { padding-top: var(--size-2) !important; } .pt-3 { padding-top: var(--size-3) !important; } .pt-4 { padding-top: var(--size-4) !important; } .pt-5 { padding-top: var(--size-5) !important; } .pt-6 { padding-top: var(--size-6) !important; } /* -------------------- */ .pr-0 { padding-right: 0 !important; } .pr-1 { padding-right: var(--size-1) !important; } .pr-2 { padding-right: var(--size-2) !important; } .pr-3 { padding-right: var(--size-3) !important; } .pr-4 { padding-right: var(--size-4) !important; } .pr-5 { padding-right: var(--size-5) !important; } .pr-6 { padding-right: var(--size-6) !important; } /* -------------------- */ .pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: var(--size-1) !important; } .pb-2 { padding-bottom: var(--size-2) !important; } .pb-3 { padding-bottom: var(--size-3) !important; } .pb-4 { padding-bottom: var(--size-4) !important; } .pb-5 { padding-bottom: var(--size-5) !important; } .pb-6 { padding-bottom: var(--size-6) !important; } /* -------------------- */ .pl-0 { padding-left: 0 !important; } .pl-1 { padding-left: var(--size-1) !important; } .pl-2 { padding-left: var(--size-2) !important; } .pl-3 { padding-left: var(--size-3) !important; } .pl-4 { padding-left: var(--size-4) !important; } .pl-5 { padding-left: var(--size-5) !important; } .pl-6 { padding-left: var(--size-6) !important; } /* -------------------- */ .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: var(--size-1) !important; } .mt-2 { margin-top: var(--size-2) !important; } .mt-3 { margin-top: var(--size-3) !important; } .mt-4 { margin-top: var(--size-4) !important; } .mt-5 { margin-top: var(--size-5) !important; } .mt-6 { margin-top: var(--size-6) !important; } /* -------------------- */ .mr-0 { margin-right: 0 !important; } .mr-1 { margin-right: var(--size-1) !important; } .mr-2 { margin-right: var(--size-2) !important; } .mr-3 { margin-right: var(--size-3) !important; } .mr-4 { margin-right: var(--size-4) !important; } .mr-5 { margin-right: var(--size-5) !important; } .mr-6 { margin-right: var(--size-6) !important; } /* -------------------- */ .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: var(--size-1) !important; } .mb-2 { margin-bottom: var(--size-2) !important; } .mb-3 { margin-bottom: var(--size-3) !important; } .mb-4 { margin-bottom: var(--size-4) !important; } .mb-5 { margin-bottom: var(--size-5) !important; } .mb-6 { margin-bottom: var(--size-6) !important; } /* -------------------- */ .ml-0 { margin-left: 0 !important; } .ml-1 { margin-left: var(--size-1) !important; } .ml-2 { margin-left: var(--size-2) !important; } .ml-3 { margin-left: var(--size-3) !important; } .ml-4 { margin-left: var(--size-4) !important; } .ml-5 { margin-left: var(--size-5) !important; } .ml-6 { margin-left: var(--size-6) !important; } /* -------------------- */ .noscroll { position: fixed; overflow-y: scroll; width: 100%; } /* -------------------- */ .shadow { box-shadow: var(--box-shadow-lv1) !important; } /* -------------------- */ .video-container { width: 100%; max-width: 100%; margin: 0 auto; } .video-container .video { position: relative; height: 0; overflow: hidden; padding-bottom: 100%; padding-top: 30px; } .video-16-9 { padding-bottom: 56.25% !important; } .video-4-3 { padding-bottom: 75% !important; } .video-container .video iframe, .video-container .video object, .video-container .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* -------------------- */ .text-center { text-align: center !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } /* -------------------- */ .text-thin { font-weight: var(--font-weight-thin) !important; } .text-extra-light { font-weight: var(--font-weight-extra-light) !important; } .text-light { font-weight: var(--font-weight-light) !important; } .text-normal { font-weight: var(--font-weight-normal) !important; } .text-medium { font-weight: var(--font-weight-medium) !important; } .text-semi-bold { font-weight: var(--font-weight-semi-bold) !important; } .text-bold { font-weight: var(--font-weight-bold) !important; } .text-extra-bold { font-weight: var(--font-weight-extra-bold) !important; } .text-black { font-weight: var(--font-weight-black) !important; } /* -------------------- */ .text-italic { font-style: italic !important; } .text-normal { font-style: normal !important; } /* -------------------- */ .text-primary { color: var(--color-primary) !important; } .text-secondary { color: var(--color-secondary) !important; } .text-tertiary { color: var(--color-tertiary) !important; } .text-black { color: var(--color-black) !important; } .text-white { color: var(--color-white) !important; } .text-info { color: var(--color-info) !important; } .text-warning { color: var(--color-warning) !important; } .text-muted { color: var(--color-muted) !important; } .text-error { color: var(--color-error) !important; } .text-success { color: var(--color-success) !important; } /* -------------------- */ .bg-primary { background: var(--color-primary) !important; } .bg-secondary { background: var(--color-secondary) !important; } .bg-tertiary { background: var(--color-tertiary) !important; } .bg-black { background: var(--color-black) !important; } .bg-white { background: var(--color-white) !important; } .bg-error { background: var(--color-error) !important; } .bg-info { background: var(--color-info) !important; } .bg-success { background: var(--color-success) !important; } .bg-warning { background: var(--color-warning) !important; } .badge-dot { width: 16px; height: 16px; background: var(--color-black); border-radius: 50%; } /* -------------------- */ .site { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "header" "main" "footer"; width: 100%; min-height: 100%; } /* -------------------- */ .site-header { grid-area: header; position: sticky; z-index: 200; top: 0; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; width: 100%; height: var(--height-site-header); } .lang-switch { position: absolute; top: var(--size-4); right: var(--size-4); z-index: 200; } .lang-btn { display: flex; flex-flow: row nowrap; align-items: center; gap: var(--size-2); background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--size-2); padding: var(--size-2) var(--size-3); color: var(--color-white); font-family: var(--font-family-default); font-size: 14px; font-weight: var(--font-weight-medium); cursor: pointer; transition: var(--transition-link); } .lang-btn:hover { border-color: rgba(255, 255, 255, 0.5); } .lang-btn svg { display: block; } .lang-dropdown { display: none; position: absolute; top: calc(100% + var(--size-2)); right: 0; background: var(--color-gray-900); border: 1px solid var(--color-gray-700); border-radius: var(--size-2); padding: var(--size-2) 0; list-style: none; margin: 0; min-width: 100%; max-height: 320px; overflow-y: auto; box-shadow: var(--box-shadow-lv2); } .lang-switch.open .lang-dropdown { display: block; } .lang-dropdown li a { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; gap: var(--size-4); padding: var(--size-2) var(--size-4); color: var(--color-white); text-decoration: none; font-size: 14px; font-weight: var(--font-weight-medium); white-space: nowrap; transition: var(--transition-link); } .lang-dropdown li a:hover { background: var(--color-gray-800); } .lang-dropdown li.active a { background: var(--color-gray-800); } .lang-dropdown li a svg { flex: none; color: var(--color-primary); opacity: 0; } .lang-dropdown li.active a svg { opacity: 1; } /* -------------------- */ .site-main { grid-area: main; display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: center; width: 100%; -webkit-overflow-scrolling: touch; } /* -------------------- */ .site-footer { grid-area: footer; display: flex; flex-flow: column wrap; justify-content: flex-start; align-items: center; width: 100%; background: var(--color-gray-900); } /* -------------------- */ .site-title { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: 100%; font-size: 32px; color: var(--color-white); } /* -------------------- */ .main-header { position: relative; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; width: 100%; height: var(--height-site-header); background: var(--color-white); border-bottom: 1px solid var(--color-gray-100); padding-left: var(--size-4); } /* -------------------- */ .main-body { width: 100%; } /* -------------------- */ .main-footer { } /* -------------------- */ article.mobile-app { position: relative; display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; background: var(--color-gray-900); padding: var(--size-5); margin: 0 auto; overflow: hidden; transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.mobile-app { padding: var(--size-6); } } article.mobile-app::after { content: ""; position: absolute; bottom: -300px; left: -50px; right: -50px; z-index: 10; display: block; background: var(--color-white); min-height: 400px; transform: rotate(-5deg); transform-origin: 0 0 0; transition: var(--transition-responsive); } article.mobile-app .content { z-index: 15; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; max-width: var(--breakpoint-xl); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.mobile-app .content { flex-flow: row nowrap; } } article.mobile-app .text { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.mobile-app .text { min-width: 480px; min-height: 600px; margin-right: var(--size-6); } } article.mobile-app .text .title { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.mobile-app .text .title { animation: anim-mobile-app-title 1.2s ease; } } @keyframes anim-mobile-app-title { from { margin-left: -25px; opacity: 0; } to { margin-left: 0; opacity: 1; } } article.mobile-app .logo { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; border-radius: var(--size-3); transition: var(--transition-responsive); } article.mobile-app .logo img { display: block; width: 50px; height: auto; border-radius: var(--size-3); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.mobile-app .logo img { width: 64px; } } article.mobile-app .text .title h1 { font-size: 30px; color: var(--color-white); text-align: left; margin-left: var(--size-3); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.mobile-app .text .title h1 { font-size: 40px; } } article.mobile-app .text h2 { font-size: 28px; font-weight: var(--font-weight-normal); color: var(--color-white); text-align: left; margin-top: var(--size-5); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.mobile-app .text h2 { font-size: 34px; margin-top: var(--size-6); animation: anim-mobile-app-text-h2 1s ease; } } @keyframes anim-mobile-app-text-h2 { from { margin-left: -100px; opacity: 0; } to { margin-left: 0; opacity: 1; } } article.mobile-app .text p { font-size: 20px; font-weight: var(--font-weight-light); color: var(--color-white); text-align: left; margin-top: var(--size-3); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.mobile-app .text p { font-size: 24px; margin-top: var(--size-4); animation: anim-mobile-app-text-p 1s ease; } } @keyframes anim-mobile-app-text-p { from { margin-left: -200px; opacity: 0; } to { margin-left: 0; opacity: 1; } } article.mobile-app .button-group { display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; width: 100%; margin-top: var(--size-5); transition: var(--transition-responsive); } article.mobile-app .button-group a { margin: 0 var(--size-3); box-shadow: var(--box-shadow-lv1); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.mobile-app .button-group a.btn-google { animation: anim-mobile-app-btn-google 1.2s ease; } } @keyframes anim-mobile-app-btn-google { from { margin-top: 50px; opacity: 0; } to { margin-top: 0; opacity: 1; } } @media only screen and (min-width: 960px) { article.mobile-app .button-group a.btn-apple { animation: anim-mobile-app-btn-apple 1.2s ease; } } @keyframes anim-mobile-app-btn-apple { from { margin-top: 100px; opacity: 0; } to { margin-top: 0; opacity: 1; } } article.mobile-app .button-group a img { display: block; width: auto; height: 44px; transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.mobile-app .button-group a img { height: 54px; } } article.mobile-app .picture { position: relative; z-index: 15; display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; margin-top: var(--size-5); } article.mobile-app .picture .mobile-apple { margin-top: 32px; margin-left: -32px; } article.mobile-app .mobile-picture { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; transition: var(--transition-responsive); } article.mobile-app .mobile-picture img { display: block; width: 100%; max-width: 240px; height: auto; filter: drop-shadow(1px 1px 10px rgba(000, 000, 000, 0.2)); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.mobile-app .picture .mobile-android .mobile-picture { animation: anim-mobile-app-android-picture 1.1s ease; } } @keyframes anim-mobile-app-android-picture { from { transform: translateY(-150px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(0); opacity: 1; } } @media only screen and (min-width: 960px) { article.mobile-app .picture .mobile-apple .mobile-picture { animation: anim-mobile-app-apple-picture 1s ease; } } @keyframes anim-mobile-app-apple-picture { from { transform: translateY(-250px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(0); opacity: 1; } } /* -------------------- */ article.desktop-app { position: relative; display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; background: var(--color-white); padding: var(--size-5); margin: 0 auto; overflow: hidden; transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.desktop-app { padding: var(--size-6); } } /*article.desktop-app::after { content: ""; position: absolute; bottom: -300px; left: -50px; right: -50px; z-index: 10; display: block; background: var(--color-gray-900); min-height: 400px; transform: rotate(3deg); transform-origin: 100% 100%; transition: var(--transition-responsive); }*/ article.desktop-app .content { z-index: 15; display: flex; flex-flow: column-reverse nowrap; justify-content: center; align-items: center; max-width: var(--breakpoint-xl); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.desktop-app .content { flex-flow: row nowrap; } } article.desktop-app .text { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.desktop-app .text { justify-content: center; min-width: 480px; margin-left: var(--size-6); } } article.desktop-app .text .title { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; transition: var(--transition-responsive); } article.desktop-app .logo { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; border-radius: var(--size-3); transition: var(--transition-responsive); } article.desktop-app .logo img { display: block; width: 50px; height: auto; border-radius: var(--size-3); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.desktop-app .logo img { width: 64px; } } article.desktop-app .text .title h2 { font-size: 30px; color: var(--color-default); text-align: left; margin-left: var(--size-3); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.desktop-app .text .title h2 { font-size: 40px; } } article.desktop-app .text h3 { font-size: 28px; font-weight: var(--font-weight-normal); color: var(--color-default); text-align: left; margin-top: var(--size-5); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.desktop-app .text h3 { font-size: 34px; margin-top: var(--size-6); } } article.desktop-app .text p { font-size: 20px; font-weight: var(--font-weight-light); color: var(--color-default); text-align: left; margin-top: var(--size-3); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.desktop-app .text p { font-size: 24px; margin-top: var(--size-4); } } article.desktop-app .button-group { display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; width: 100%; margin-top: var(--size-5); transition: var(--transition-responsive); } article.desktop-app .button-group a { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; height: 40px; font-weight: var(--font-weight-medium); font-size: 20px; color: var(--color-white); text-decoration: none; background: var(--color-primary); border-radius: var(--size-2); padding: var(--size-3) var(--size-4); box-shadow: var(--box-shadow-lv1); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.desktop-app .button-group a { height: 48px; font-size: 22px; } } article.desktop-app .picture { position: relative; z-index: 15; display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; margin-top: var(--size-5); } article.desktop-app .desktop-picture { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; transition: var(--transition-responsive); } article.desktop-app .desktop-picture img { display: block; width: 100%; max-width: 500px; height: auto; filter: drop-shadow(1px 1px 10px rgba(000, 000, 000, 0.2)); transition: var(--transition-responsive); } /* -------------------- */ article.video { background: var(--color-gray-900); /*padding: var(--size-5);*/ margin: 0 auto; transition: var(--transition-responsive); } article.video .video-container .video, article.video .video-container .video iframe { transition: var(--transition-responsive); } @media only screen and (min-width: 1024px) { article.video .video-container .video { width: 960px; height: 540px; margin: 0 auto; padding: 0; } article.video .video-container .video.video-16-9 { padding-bottom: 0 !important; } article.video .video-container .video iframe { width: 960px; height: 540px; } } /* -------------------- */ article.nfccards { position: relative; display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; background: var(--color-white); padding: var(--size-5); margin: 0 auto; overflow: hidden; transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.nfccards { padding: var(--size-6); } } article.nfccards .content { z-index: 15; display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; max-width: var(--breakpoint-xl); transition: var(--transition-responsive); } article.nfccards .nfccards-picture { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; transition: var(--transition-responsive); } article.nfccards .nfccards-picture img { display: block; width: 200px; height: auto; transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.nfccards .nfccards-picture img { width: 300px; } } article.nfccards .text h2 { font-size: 30px; color: var(--color-default); text-align: center; margin-top: var(--size-4); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.nfccards .text h2 { font-size: 40px; margin-top: var(--size-5); } } article.nfccards .text p { font-size: 20px; font-weight: var(--font-weight-light); color: var(--color-default); text-align: center; margin-top: var(--size-3); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.nfccards .text p { font-size: 24px; margin-top: var(--size-4); } } article.nfccards .button-group { display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-start; width: 100%; margin-top: var(--size-5); transition: var(--transition-responsive); } article.nfccards .button-group a { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; height: 40px; font-weight: var(--font-weight-medium); font-size: 20px; color: var(--color-white); text-decoration: none; background: var(--color-primary); border-radius: var(--size-2); padding: var(--size-3) var(--size-4); box-shadow: var(--box-shadow-lv1); transition: var(--transition-responsive); } @media only screen and (min-width: 960px) { article.nfccards .button-group a { height: 48px; font-size: 22px; } } article.nfccards ul.nfc-products { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; margin-top: var(--size-5); transition: var(--transition-responsive); } article.nfccards ul.nfc-products > li { margin: var(--size-3); transition: var(--transition-responsive); } article.nfccards ul.nfc-products > li > a { display: flex; flex-flow: column wrap; justify-content: center; align-items: center; text-decoration: none; transition: var(--transition-responsive); } article.nfccards ul.nfc-products > li > a > img { display: block; width: 140px; height: auto; box-shadow: var(--box-shadow-lv1); transition: var(--transition-responsive); } @media only screen and (min-width: 480px) { article.nfccards ul.nfc-products > li > a > img { width: 180px; } } @media only screen and (min-width: 960px) { article.nfccards ul.nfc-products > li > a > img { width: 220px; } } article.nfccards ul.nfc-products > li > a > span { font-size: 16px; color: var(--color-default); margin-top: var(--size-3); transition: var(--transition-responsive); } @media only screen and (min-width: 480px) { article.nfccards ul.nfc-products > li > a > span { font-size: 20px; } } @media only screen and (min-width: 960px) { article.nfccards ul.nfc-products > li > a > span { margin-top: var(--size-4); font-size: 24px; } } /* -------------------- */ .site-footer .links { padding: 0 var(--size-4); margin-top: var(--size-5); } .site-footer .links ul { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; width: 100%; } .site-footer .links ul li { margin: var(--size-2); } .site-footer .links a { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; width: 36px; height: 36px; background: var(--color-primary); border-radius: var(--size-2); margin: var(--size-2); transition: var(--transition-link); } .site-footer .links a img { display: block; width: 24px; height: 24px; background: var(--color-primary); } .site-footer .copyright { padding: 0 var(--size-4); margin-top: var(--size-4); margin-bottom: var(--size-5); } .site-footer .copyright p { font-size: 14px; color: var(--color-gray-300); text-align: center; }