html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } :focus { outline: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; -moz-appearance: none; } input[type=search] { -webkit-appearance: none; -moz-appearance: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } textarea { overflow: auto; vertical-align: top; resize: vertical; } audio, canvas, video { display: inline-block; display: inline; max-width: 100%; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } img { border: 0; -ms-interpolation-mode: bicubic; } figure { margin: 0; } form { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; white-space: normal; margin-left: -7px; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; vertical-align: middle; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; overflow: visible; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; height: 13px; width: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } html, button, input, select, textarea { color: #222; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } img { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } :root { --max-width-size: 1440px; --marginSideSizeLeft: clamp(128px, 0.8333333333333333vw, 192px); --marginSideSizeRight: clamp(32px, 0.8333333333333333vw, 128px); --background-color-1: #FFFFFF; --background-color-2: #F5F5F5; --background-color-3: #D9D9D9; --line-color: #ACACAC; --pen-color-1: #3C3C3C; --pen-color-2: #ACACAC; --pen-color-3: #000000; --logo-color-r: #C11D7D; --logo-color-y: #F3C41E; --logo-color-b: #339BAD; } /* @media (prefers-color-scheme: dark) { :root { --background-color-1: #0D0D0D; --background-color-2: #131313; --background-color-3: #D9D9D9; } } */ @font-face { font-family: 'lexa'; font-style: normal; font-weight: 300; src: url(/font/LexendDeca-Light.ttf); } @font-face { font-family: 'lexa'; font-style: normal; font-weight: 400; src: url(/font/LexendDeca-Regular.ttf); } html { font-size: 16px; font-family: 'lexa' !important; /* scroll-behavior: smooth; */ scroll-padding-top: 0; overflow: auto; direction: ltr; } @media only screen and (min-width:0px) and (max-width:500px) and (orientation:portrait) and (pointer: coarse) { html { --device: mobileP; font-size: clamp(0px, 3.80952380952381vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width:0px) and (max-width:900px) and (orientation:landscape) and (pointer: coarse) { html { --device: mobileL; font-size: clamp(0px, 0.5vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width:501px) and (max-width:2500px) and (orientation:portrait) and (pointer: coarse) { html { --device: tabletP; font-size: clamp(0px, 2.5vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (min-width:901px) and (max-width:2900px) and (orientation:landscape) and (pointer: coarse) { html { --device: tabletL; font-size: clamp(0px, 1.5vw, 16px); scrollbar-width: none; -ms-overflow-style: none; } } @media only screen and (pointer: fine) { html { font-size: clamp(0px, 1.111111111111111vw, 16px); } @media only screen and (orientation:landscape) { html { --device: desktopL; scrollbar-width: auto; -ms-overflow-style: none; } } @media only screen and (orientation:portrait) { html { --device: desktopP; scrollbar-width: auto; -ms-overflow-style: none; } } @media only screen and (min-width:0px) and (max-width:1024px) { :root {} } } .paddingBig { padding-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSizeLeft)) !important; padding-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSizeRight)) !important; box-sizing: border-box !important; } .marginBig { margin-left: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSizeLeft)) !important; margin-right: calc(((100vw - min(100vw, var(--max-width-size))) / 2) + var(--marginSideSizeRight)) !important; box-sizing: border-box !important; } @media only screen and (orientation:portrait) and (pointer: coarse) { .paddingBig { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .marginBig { margin-left: 1.5rem !important; margin-right: 1.5rem !important; box-sizing: border-box !important; } } * { font-family: 'lexa' !important; box-sizing: border-box; } .fleshAfter { display: flex; flex-direction: row; align-items: center; } .fleshAfter::after { content: ''; background-image: url(/image/flesh.svg); background-repeat: no-repeat; background-position-x: 0px; background-size: calc(var(--fleshheight) * (3.3125 / 2.52181)) var(--fleshheight); display: inline-block; width: calc(var(--fleshheight) * (3.3125 / 2.52181)); height: var(--fleshheight); margin-left: 0.5rem; padding-right: calc(2 * var(--fleshheight)); } .fleshAfter.small::after { padding-right: calc(1 * var(--fleshheight)); } .fleshAfter.op0::after { opacity: 0; } .fleshAfter:hover:after { background-position-x: 0; opacity: 1; animation-name: specialA; animation-duration: 1s; animation-iteration-count: 1; animation-direction: forward; animation-delay: 0s; } @keyframes specialA { 0% { background-position-x: 0; opacity: 1; } 70% { background-position-x: calc(var(--fleshheight) * 2); opacity: 0; } 71% { background-position-x: calc(var(--fleshheight) * -3); opacity: 1; } 100% { background-position-x: 0; opacity: 1; } } .fleshAfter.op0:hover:after { background-position-x: 0; opacity: 1; animation-name: specialA2; animation-duration: 1s; animation-iteration-count: 1; animation-direction: forward; animation-delay: 0s; } @keyframes specialA2 { 0% { background-position-x: calc(var(--fleshheight) * -1); opacity: 0.5; } 70% { background-position-x: calc(var(--fleshheight) * 2); opacity: 0; } 71% { background-position-x: calc(var(--fleshheight) * -3); opacity: 1; } 100% { background-position-x: 0; opacity: 1; } } @media only screen and (orientation:portrait) and (pointer: coarse) { .fleshAfter::after { content: unset; } } .CEO { display: flex; flex-direction: row; width: 100%; align-items: center; justify-content: space-between; gap: 5rem; } .CEO>img { aspect-ratio: 21.625 / 30.5; width: 21.625rem; } .CEO>div { padding-left: 3rem; } .CEO>div>h2 { color: var(--Dark-Grey, #3C3C3C); font-size: 3.125rem; font-style: normal; font-weight: 400; line-height: normal; } .CEO>div>span { color: var(--Light-grey, #D8D8D8); font-size: 1.875rem; font-style: normal; font-weight: 400; line-height: normal; } .CEO>div>blockquote { color: var(--new-grey, #ACACAC); font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: normal; padding-top: 2rem; display: flex; flex-direction: row; gap: 1.2rem; max-width: 55rem; } .CEO>div>blockquote::before, .CEO>div>blockquote::after { content: '“'; color: var(--new-grey, #ACACAC); text-align: right; font-size: 6.25rem; font-style: normal; font-weight: 400; line-height: normal; transform: translateY(-1.5rem); } .CEO>div>blockquote::after { margin-top: 6rem; } .aboutUs { background: var(--Background-Grey, #F9F9F9); padding-top: 3rem; padding-bottom: 8rem; } .aboutUs>h2 { color: var(--Dark-Grey, #3C3C3C); font-size: 3.125rem; font-style: normal; font-weight: 400; line-height: normal; padding-bottom: 4rem; padding-left: 3rem; } .aboutUs>p { color: var(--new-grey, #ACACAC); font-size: 1rem; font-style: normal; font-weight: 400; line-height: normal; padding-bottom: 1rem; padding-left: 3rem; max-width: 88%; } .ourTeam { padding-top: 3rem; padding-bottom: 4rem; } .ourTeam>h2 { color: var(--Dark-Grey, #3C3C3C); font-size: 3.125rem; font-style: normal; font-weight: 400; line-height: normal; padding-bottom: 4rem; padding-left: 3rem; } .ourTeam>ul { padding-left: 3rem; } .ourTeam li { display: flex; flex-direction: row; gap: 4rem; margin-bottom: 4rem; } .ourTeam li>div { flex: 1; } .ourTeam li>p { flex: 3; padding-right: 4rem; } .ourTeam h3 { color: var(--Dark-Grey, #3C3C3C); font-size: 1.875rem; font-style: normal; font-weight: 400; line-height: normal; } .ourTeam span { color: var(--Light-grey, #D8D8D8); font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: normal; } .ourTeam p { color: var(--new-grey, #ACACAC); font-size: 1rem; font-style: normal; font-weight: 400; line-height: normal; } @media only screen and (orientation:portrait) and (pointer: coarse) { .CEO { flex-direction: column; padding: 0 !important; gap: 0; } .CEO>img { aspect-ratio: 25 / 25; object-fit: cover; width: 100%; } .CEO>div { padding: 1.5rem 1.5rem 0; } .CEO>div>h2 { color: var(--Dark-Grey, #3C3C3C); font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: normal; } .CEO>div>span { color: var(--Light-grey, #D8D8D8); font-size: 1rem; font-style: normal; font-weight: 400; line-height: normal; } .CEO>div>blockquote { color: var(--new-grey, #ACACAC); font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: normal; gap: 0; max-width: 100%; } .CEO>div>blockquote::before, .CEO>div>blockquote::after { color: var(--new-grey, #ACACAC); font-size: 3.125rem; font-style: normal; font-weight: 400; line-height: normal; transform: translateX(-0.5rem) translateY(-1.5rem); } .CEO>div>blockquote::after { margin-top: 6rem; } .aboutUs { padding-bottom: 5rem; } .aboutUs>h2 { color: var(--Dark-Grey, #3C3C3C); font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: normal; padding-bottom: 1.5rem; padding-left: 0; } .aboutUs>p { color: var(--new-grey, #ACACAC); font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: normal; padding-bottom: 1rem; padding-left: 0; max-width: 100%; } .ourTeam { padding-bottom: 5rem; } .ourTeam>h2 { color: var(--Dark-Grey, #3C3C3C); font-family: "Lexend Deca"; font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: normal; padding-bottom: 2.8rem; padding-left: 0; } .ourTeam>ul { padding-left: 0; } .ourTeam li { flex-direction: column; gap: 0; margin-bottom: 3.6rem; } .ourTeam li>div { flex: 1; margin-bottom: 1rem; } .ourTeam li>p { flex: 3; padding-right: 0; } .ourTeam h3 { color: var(--Dark-Grey, #3C3C3C); font-size: 1.125rem; font-style: normal; font-weight: 400; line-height: normal; } .ourTeam span { color: var(--Light-grey, #D8D8D8); font-size: 0.9375rem; font-style: normal; font-weight: 400; line-height: normal; } .ourTeam p { color: var(--new-grey, #ACACAC); font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: normal; } } html.hiddenScrollBar { overflow: hidden; margin-right: var(--scrollbar-width); } .menu { position: fixed; padding: 1.19rem 0 calc(30dvh + 1.19rem); left: 0; top: 0; width: 4rem; height: 130dvh; background-color: var(--background-color-1); z-index: 2; display: flex; flex-direction: column; justify-content: space-between; -webkit-transition: left 1s ease; -moz-transition: left 1s ease; -o-transition: left 1s ease; transition: left 1s ease; box-shadow: 0px 0px 20px #0002; } .menu.show { left: 100%; -webkit-transition: left 1s ease; -moz-transition: left 1s ease; -o-transition: left 1s ease; transition: left 1s ease; } .menu>nav>.openClose { width: 100%; height: 4rem; cursor: pointer; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; padding: 1rem 0; border: 0; background-color: transparent; } .menu>nav>.openClose>span { width: 0.4rem; height: 0.4rem; background-color: var(--pen-color-1); position: relative; transform: rotate(45deg); display: block; border-radius: 25%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menu>nav>.openClose>span::before, .menu>nav>.openClose>span::after { content: ''; width: 0.4rem; height: 0.4rem; background-color: var(--pen-color-1); position: absolute; left: -6px; bottom: 6px; border-radius: 25%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menu>nav>.openClose>span::after { left: 6px; bottom: -6px; } .menu>nav>.openClose>span>div { opacity: 0; position: absolute; width: 2px; height: 24px; top: -9px; left: 1px; background-color: var(--pen-color-1); transform: rotate(45deg); -webkit-transition: all 0.1s ease 0.1s; -moz-transition: all 0.1s ease 0.1s; -o-transition: all 0.1s ease 0.1s; transition: all 0.1s ease 0.1s; } .menu.show>nav>.openClose { transform: translateX(-100vw); opacity: 1; animation-name: menuButton; animation-duration: 2s; animation-iteration-count: 1; animation-direction: forward; animation-delay: 0s; } @keyframes menuButton { 0% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(0); opacity: 1; } 51% { transform: translateX(0); opacity: 0; } 52% { transform: translateX(-100vw); opacity: 0; } 80% { transform: translateX(-100vw); opacity: 1; } } .menu.show>nav>.openClose>span { transform: rotate(0); -webkit-transition: all 0.1s ease 1s; -moz-transition: all 0.1s ease 1s; -o-transition: all 0.1s ease 1s; transition: all 0.1s ease 1s; } .menu.show>nav>.openClose>span>div { opacity: 1; -webkit-transition: all 0.1s ease 1s; -moz-transition: all 0.1s ease 1s; -o-transition: all 0.1s ease 1s; transition: all 0.1s ease 1s; } .menu:not(.show)>nav>.openClose:hover>span { rotate: 180deg; background-color: var(--logo-color-b); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menu:not(.show)>nav>.openClose:hover>span::before { background-color: var(--logo-color-r); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menu:not(.show)>nav>.openClose:hover>span::after { background-color: var(--logo-color-y); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menu.show>nav>.openClose>span { rotate: 180deg; } .menu>nav>ul { width: 100vw; height: 100dvh; transform: translateX(-100vw); background-color: var(--background-color-1); position: absolute; top: 0; left: 0; z-index: 1; display: flex; flex-direction: column; padding: 12vw; justify-content: space-between; box-sizing: border-box; } .menu>nav>ul::after { content: ''; position: absolute; bottom: 7px; right: 15px; font-size: 50px; color: var(--pen-color-1); background-image: url(/image/logo2.png); background-repeat: no-repeat; background-size: 14rem auto; width: 14rem; height: 3.5rem; } .menu>nav>ul>li>a { font-size: 2.5rem; font-style: normal; font-weight: 400; line-height: normal; text-decoration: none; color: var(--pen-color-1); display: flex; flex-direction: row; } .menu>nav>ul>li.active>a::after { opacity: 1 !important; transform: rotateY(180deg) !important; padding-right: 0 !important; } .menu>nav>ul>li.active>a:hover::after { animation-duration: 0s !important; } .menu>nav>ul>li>img { position: absolute; top: 0; right: 0; width: 30vw; opacity: 0; -webkit-transition: all 0.4s ease 0.1s; -moz-transition: all 0.4s ease 0.1s; -o-transition: all 0.4s ease 0.1s; transition: all 0.4s ease 0.1s; } .menu>nav>ul>li>a:hover+img { opacity: 1; -webkit-transition: all 0.4s ease 0.1s; -moz-transition: all 0.4s ease 0.1s; -o-transition: all 0.4s ease 0.1s; transition: all 0.4s ease 0.1s; } .menu>nav>.socialPart { display: none; } .menu>.socialPart { display: flex; flex-direction: column; } .menu>.socialPart>a { font-family: "Josefin Sans"; text-decoration: none; padding: 0.5rem 0; text-align: center; font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.08125rem; color: var(--pen-color-1); } .menu>ul.language { position: fixed; top: 0; left: 75vw; display: inline-block; color: #000; text-align: center; font-size: 0.9375rem; font-style: normal; font-weight: 300; line-height: normal; text-decoration: none; display: flex; flex-direction: row; padding: 1rem; background-color: #FFF; z-index: 1; } .menu>ul.language a { display: inline-block; color: #000; text-align: center; font-size: 0.9375rem; font-style: normal; font-weight: 300; line-height: normal; text-decoration: none; display: flex; flex-direction: row; } .menu>.language .fr::before { content: 'Française'; } .menu>.language .en::before { content: 'English'; } .menu>.language .fa::before { content: 'فارسی'; } html[lang="En"] .menu>.language .fa, html[lang="Fr"] .menu>.language .fa { display: none; } .menu>.getQuote { position: fixed; top: 0; left: calc(100vw - var(--scrollbar-width)); padding: 1rem 2rem; background: var(--Black, #000); transform-origin: top right; transform: rotate(-90deg) translateY(-18rem); color: var(--White, #FFF); text-align: center; font-size: 0.9375rem; font-style: normal; font-weight: 300; line-height: normal; text-decoration: none; width: 15rem; height: 3rem; } .menu>.extraHeader { display: none; } @media only screen and (orientation:portrait) and (pointer: coarse) { .menu { width: 100vw; height: 4rem; display: flex; flex-direction: row; align-items: center; padding: 0; box-sizing: border-box; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menu.show { left: unset; top: 100dvh; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menu>nav>.openClose { width: 4rem; } .menu.show>nav>.openClose { transform: translateY(calc(-100dvh + var(--scrollbar-width))); animation-duration: 1s; } @keyframes menuButton { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(0); opacity: 1; } 51% { transform: translateY(0); opacity: 0; } 52% { transform: translateY(calc(-100dvh + var(--scrollbar-width))); opacity: 0; } 80% { transform: translateY(calc(-100dvh + var(--scrollbar-width))); opacity: 1; } } .menu.show>nav>.openClose>span { transform: rotate(0); -webkit-transition: all 0.1s ease 0.5s; -moz-transition: all 0.1s ease 0.5s; -o-transition: all 0.1s ease 0.5s; transition: all 0.1s ease 0.5s; } .menu.show>nav>.openClose>span>div { opacity: 1; -webkit-transition: all 0.1s ease 0.5s; -moz-transition: all 0.1s ease 0.5s; -o-transition: all 0.1s ease 0.5s; transition: all 0.1s ease 0.5s; } .menu:not(.show)>nav>.openClose:hover>span { background-color: var(--pen-color-1); } .menu:not(.show)>nav>.openClose:hover>span::before { background-color: var(--pen-color-1); } .menu:not(.show)>nav>.openClose:hover>span::after { background-color: var(--pen-color-1); } .menu>nav>ul { padding: 27dvh 3rem; } .menu>nav>ul::after { bottom: 140px; right: 3px; font-size: 30px; transform: rotateZ(-90deg); transform-origin: right bottom; } .menu>nav>ul>li>img { display: none; } .menu>nav>ul>li>a { font-size: 1.875rem; } .menu>nav>ul>li>a:after { content: none; } .menu>nav { position: relative; } .menu>nav>.socialPart { display: flex; flex-direction: row; position: absolute; left: 3rem; bottom: 15dvh; z-index: 1; } .menu>nav>.socialPart>a { padding-right: 4.3rem; text-decoration: none; color: var(--Dark-Grey, #3C3C3C); font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: -0.08125rem; } .menu>nav>ul { transform: translateX(0) translateY(-100dvh); } .menu>nav>ul::after { bottom: 01rem; right: -9.5rem; background-size: 10rem auto; width: 10rem; height: 2.2rem; transform: rotate(-90deg); transform-origin: left bottom; } .menu>.socialPart { display: none; } .menu>ul.language { position: relative; top: unset; left: unset; background-color: transparent; padding-inline: 0; width: 4rem; } .menu>ul.language a { padding-block: 1rem; } .menu>.language .fr::before { content: 'Fr'; padding-inline: 1.5rem; } .menu>.language .en::before { content: 'En'; padding-inline: 1.5rem; } .menu>.language .fa::before { content: 'فا'; padding-inline: 1.5rem; } .menu>.getQuote { display: none; } .menu>.extraHeader { position: fixed; bottom: 0; left: 0; display: flex; flex-direction: row; width: 100%; /* height: 2.25rem; */ background-color: var(--background-color-2); justify-content: center; align-items: center; padding: 0.4rem 1.25rem; box-sizing: border-box; box-shadow: 0px 0px 20px #0002; } .menu>.extraHeader>a { display: flex; align-items: center; color: var(--Dark-Grey, #3C3C3C); text-align: center; font-size: 1.2rem; font-style: normal; font-weight: 400; line-height: normal; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; padding: 0.7rem; } .menu>.extraHeader>.darkMode { width: 24px; height: 24px; border-radius: 50%; background-color: var(--background-color-3); background-image: url(/image/assistance.svg); background-repeat: no-repeat; background-position: center center; } .menu>.extraHeader>.accesibilTool { width: 24px; height: 24px; border-radius: 50%; background-color: var(--background-color-3); background-image: url(/image/assistance.svg); background-repeat: no-repeat; background-position: center center; } } div.cookies { background-color: #000; flex-direction: row; position: fixed; left: 6rem; bottom: 2rem; z-index: 10000; padding: 1.5rem; max-width: 28rem; display: none; box-sizing: border-box; } div.cookies.show { display: flex; } div.cookies>p { color: var(--background-2, #FFF); font-size: 0.9375rem; font-style: normal; font-weight: 400; line-height: 1.25rem; } div.cookies>p>a { color: var(--primary-01, #889BE7); font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: 1.25rem; text-decoration-line: underline; } div.cookies>button { background-color: transparent; border: 0; background-image: url(/image/zarbdar2.svg); background-repeat: no-repeat; background-size: 0.75rem 0.75rem; background-position: top right; padding: 0 0 1rem 3rem; } @media only screen and (orientation:portrait) and (pointer: coarse) { div.cookies { left: 0; bottom: 0; width: 100%; } } div.loading { width: 100vw; height: 100dvh; background-color: var(--logo-color-b); position: fixed; left: 0; top: 0; z-index: 10; transform: translateX(-100vw); -webkit-transition: all 0.5s ease-in-out 0.4s; -moz-transition: all 0.5s ease-in-out 0.4s; -o-transition: all 0.5s ease-in-out 0.4s; transition: all 0.5s ease-in-out 0.4s; display: none; } div.loading.ready { display: initial; } div.loading.show { transform: translateX(0); -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; -o-transition: all 1s ease-in-out 0s; transition: all 1s ease-in-out 0s; } div.loading.ready.show.barax { transform: translateX(0); -webkit-transition: all 0s ease-in-out 0s; -moz-transition: all 0s ease-in-out 0s; -o-transition: all 0s ease-in-out 0s; transition: all 0s ease-in-out 0s; } div.loading::before { content: ''; width: 100vw; height: 100dvh; background-color: var(--logo-color-r); position: fixed; left: 0; top: 0; z-index: 1; transform: translateX(-30vw); -webkit-transition: all 0.5s ease-in-out 0.2s; -moz-transition: all 0.5s ease-in-out 0.2s; -o-transition: all 0.5s ease-in-out 0.2s; transition: all 0.5s ease-in-out 0.2s; } div.loading.show::before { transform: translateX(-6.75rem); -webkit-transition: all 1s ease-in-out 0.2s; -moz-transition: all 1s ease-in-out 0.2s; -o-transition: all 1s ease-in-out 0.2s; transition: all 1s ease-in-out 0.2s; } div.loading.show.barax::before { transform: translateX(-6.75rem); -webkit-transition: all 0s ease-in-out 0s; -moz-transition: all 0s ease-in-out 0s; -o-transition: all 0s ease-in-out 0s; transition: all 0s ease-in-out 0s; } div.loading::after { content: ''; width: 100vw; height: 100dvh; background-color: var(--logo-color-y); position: fixed; left: 0; top: 0; z-index: 2; transform: translateX(-70vw); -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } div.loading.show::after { transform: translateX(-12.63rem); -webkit-transition: all 1s ease-in-out 0.4s; -moz-transition: all 1s ease-in-out 0.4s; -o-transition: all 1s ease-in-out 0.4s; transition: all 1s ease-in-out 0.4s; } div.loading.show.barax::after { transform: translateX(-12.63rem); -webkit-transition: all 0s ease-in-out 0s; -moz-transition: all 0s ease-in-out 0s; -o-transition: all 0s ease-in-out 0s; transition: all 0s ease-in-out 0s; } div.loading>div { background-color: white; width: 0rem; height: 100dvh; display: flex; align-items: center; justify-content: center; z-index: 3; position: relative; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } div.loading.show>div { width: calc(100% - 16.63rem); -webkit-transition: all 1s ease-in-out 0.4s; -moz-transition: all 1s ease-in-out 0.4s; -o-transition: all 1s ease-in-out 0.4s; transition: all 1s ease-in-out 0.4s; } div.loading.show.barax>div { width: calc(100% - 16.63rem); -webkit-transition: all 0s ease-in-out 0s; -moz-transition: all 0s ease-in-out 0s; -o-transition: all 0s ease-in-out 0s; transition: all 0s ease-in-out 0s; } div.loading>div>img { aspect-ratio: 21.375 / 22.6875; width: 12rem; opacity: 0; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } div.loading.show>div>img { opacity: 1; -webkit-transition: all 0.5s ease-in-out 0.9s; -moz-transition: all 0.5s ease-in-out 0.9s; -o-transition: all 0.5s ease-in-out 0.9s; transition: all 0.5s ease-in-out 0.9s; } div.loading.show.barax>div>img { opacity: 1; -webkit-transition: all 0s ease-in-out 0s; -moz-transition: all 0s ease-in-out 0s; -o-transition: all 0s ease-in-out 0s; transition: all 0s ease-in-out 0s; } @media only screen and (orientation:portrait) and (pointer: coarse) { div.loading { transform:translateX(0) translateY(-130dvh); } div.loading.show { transform:translateX(0) translateY(0dvh); } div.loading.show.barax { transform:translateX(0) translateY(0dvh); } div.loading::before { transform:translateX(0) translateY(-30dvh); } div.loading.show::before { transform:translateX(0) translateY(-3.75rem); } div.loading.show.barax::before { transform:translateX(0) translateY(-3.75rem); } div.loading::after { transform:translateX(0) translateY(-70dvh); } div.loading.show::after { transform:translateX(0) translateY(-6.63rem); } div.loading.show.barax::after { transform:translateX(0) translateY(-6.63rem); } div.loading>div { width: 100vw; height: 0dvh; } div.loading.show>div { width: 100vw; height: calc(100dvh - 8.63rem); } div.loading.show.barax>div { width: 100vw; height: calc(100dvh - 8.63rem); } } h1 { padding-top: 5rem; padding-bottom: 5rem; position: relative; color: var(--Dark-Grey, #3C3C3C); font-size: 1.25rem; font-style: normal; font-weight: 300; line-height: normal; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; flex: 1; align-items: center; background: var(--Background-Grey, #F9F9F9); } h1::before { content: ''; width: 7.625rem; height: 2px; display: inline-block; background: #3C3C3C; } h1>em { line-height: 7.625rem; color: var(--Dark-Grey, #3C3C3C); font-size: 6.25rem; font-style: normal; font-weight: 400; width: 100%; } @media only screen and (orientation:portrait) and (pointer: coarse) { h1 { margin-top: 4rem; padding-block: 3.69rem; color: var(--Dark-Grey, #3C3C3C); font-size: 1rem; font-style: normal; font-weight: 300; line-height: normal; } h1::before { content: ''; width: 2.875rem; height: 2px; display: inline-block; background: #3C3C3C; } h1>em { color: var(--Dark-Grey, #3C3C3C); font-size: 3.125rem; font-style: normal; font-weight: 400; line-height: 4rem; } } footer { background: var(--Background-Grey, #F9F9F9); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; position: relative; } footer.big { height: 100vh; } footer>img { margin: 1.9rem 0; max-width: 80%; margin-right: auto; width: 100%; aspect-ratio: 1500 / 297; } footer>div { width: 100%; padding-right: 5rem; display: flex; flex-direction: row; padding-bottom: 3rem; border-bottom: 1px solid var(--line-color); } footer>div.topFooter>div { padding-top: 30px; width: 25%; display: flex; flex-direction: column; box-sizing: border-box; justify-content: flex-end; } footer>div.topFooter>div>* { padding: 20px 0 0; color: var(--pen-color-3); font-size: 15px; line-height: 18.75px; } footer>div.topFooter>div>p.getIn { font-size: 20px; line-height: 25px; } footer>div.topFooter>div>p.name { font-size: 52px; line-height: 62.5px; padding: 0; font-weight: bolder; } footer>div.bottomFooter { padding-block: 1.5rem; border-bottom: 0; } footer>div.bottomFooter>* { width: 25%; display: flex; flex-direction: column; padding: 20px 0 0; color: var(--pen-color-3); align-items: flex-start; height: 100%; } footer>div.bottomFooter>*:nth-child(2) { width: 50% !important; } footer>div.bottomFooter>.logoContainer { padding-left: 20px; box-sizing: border-box; padding-top: 25px; } @media only screen and (orientation:portrait) and (pointer: coarse) { footer { padding-block: 3rem; } footer.big { height: unset; } footer>img { margin: 1rem 0; max-width: 100%; margin-right: 0; } footer>div { padding-right: 0; flex-wrap: wrap; padding-bottom: 1.75rem; column-gap: 2rem; } footer>div.topFooter>div { padding-top: 0; width: calc(50% - 1rem); } footer>div.topFooter>div>* { color: var(--Black, #000); font-size: 0.8125rem; font-style: normal; font-weight: 400; line-height: normal; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; padding-block: 0.75rem; } footer>div.topFooter>div>p.getIn { color: var(--Dark-Grey, #3C3C3C); font-size: 1.0625rem; font-style: normal; font-weight: 400; line-height: normal; text-decoration-line: none; padding-top: 2rem; } footer>div.topFooter>div>p.tex { text-decoration-line: none; } footer>div.bottomFooter { padding-block: 1.5rem; border-bottom: 0; align-items: center; } footer>div.bottomFooter>* { width: calc(70% - 1rem); padding: 1rem 0; } footer>div.bottomFooter>p { width: calc(70% - 2rem); color: var(--Dark-Grey, #3C3C3C); font-size: 0.8125rem; font-style: normal; font-weight: 400; line-height: normal; } footer>div.bottomFooter>.logoContainer { width: calc(30% - 1rem); order: 2; } footer>div.bottomFooter> :nth-child(2) { width: 100% !important; order: 3; } } .logoContainer { display: flex; justify-content: center; align-items: flex-end; width: calc(var(--size) * 2 * 1.414213562373095rem); height: calc((var(--size) * 1.5 * 1.414213562373095rem) - (var(--size) * 0.35rem)); } .logo, .logo::before, .logo::after { width: calc(var(--size) * 1rem) !important; height: calc(var(--size) * 1rem) !important; border: calc(var(--size) * 0.01rem) solid black; border-radius: max(calc((var(--size) / 5) * 0.5rem), 20%); box-sizing: border-box; } .logo { margin: 0 !important; padding: 0 !important; transform: rotate(-45deg); background-color: #349BAE; position: relative; transform-origin: center center; } .logo::before { content: ''; position: absolute; background-color: #C11D7C; left: 0; bottom: calc(var(--size) * 1rem); } .logo::after { content: ''; position: absolute; background-color: #F3C41E; left: calc(var(--size) * 1rem); bottom: 0; } @media only screen and (orientation:portrait) and (pointer: coarse) { .logoContainer { width: calc(var(--sizeMobile) * 2 * 1.414213562373095rem); height: calc((var(--sizeMobile) * 1.5 * 1.414213562373095rem) - (var(--sizeMobile) * 0.35rem)); } .logo, .logo::before, .logo::after { width: calc(var(--sizeMobile) * 1rem) !important; height: calc(var(--sizeMobile) * 1rem) !important; border: calc(var(--sizeMobile) * 0.01rem) solid black; border-radius: max(calc((var(--sizeMobile) / 5) * 0.5rem), 20%); } .logo::before { bottom: calc(var(--sizeMobile) * 1rem); } .logo::after { left: calc(var(--sizeMobile) * 1rem); } }