* { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; font-size: 20px; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; } *::-moz-selection, *::-moz-selection { color: white; background-color: #23273E; } *::-moz-selection, *::selection { color: white; background-color: #23273E; } body { background-color: #fdfdfd; font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue; -webkit-font-smoothing: antialiased; color: #3d3d3d; } body.state-fixed-body { overflow: hidden; } p { margin-bottom: 1em; margin-top: 1em; font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue; line-height: 1.4; } [tabindex="-1"]:focus { outline: 0 !important; } hr { box-sizing: content-box; height: 0; overflow: visible; } strong, b { font-weight: 700; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } button, input { border: none; background: none; overflow: visible; } button { border-radius: 0; } h1, h2, h3, h4, h5, h6 { /* margin-bottom: 0.5em; */ /* margin-top: 0.5em; */ line-height: 1.3; color: #303030; } button:focus, input:focus, textarea:focus { outline: none; } .container { margin-right: auto; margin-left: auto; padding: 0 15px; max-width: 1080px; } .container:after { content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both; } .container--xsmall { max-width: 400px; } .container--small { max-width: 550px; } .container--premid { max-width: 750px; } .container--mid { max-width: 900px; } .container--large { max-width: 1200px; } .container--xlarge { max-width: 1600px; } .container--max { max-width: 100%; } .container--center { display: flex; justify-content: center; } header { position: relative; z-index: 50; } a, .link, .links-02__link, .links-04__link, .links-05__link, .links-06__link { color: #23273E; transition: color 0.2s ease; } p a:hover, .link:hover, .links-02__link:hover, .links-04__link:hover, .links-05__link:hover, .links-06__link:hover { color: #041ddf; } pre { line-height: 1.5; } .heading, .text--04__big_text { font-size: 2em; } @media (max-width: 768px) { .heading, .text--04__big_text { font-size: 1.7em; } } @media (max-width: 500px) { .heading, .text--04__big_text { font-size: 1.5em; } } .heading--light { font-weight: 300; } .heading--big { font-size: 2.5em; } @media (max-width: 768px) { .heading--big { font-size: 2.2em; } } @media (max-width: 500px) { .heading--big { font-size: 1.8em; } } .heading--accent, .text--04__big_text { font-size: 5em; margin-bottom: 10px; } @media (max-width: 768px) { .heading--accent, .text--04__big_text { font-size: 4.5em; } } @media (max-width: 500px) { .heading--accent, .text--04__big_text { font-size: 4em; } } .heading__accent_word { position: relative; } .heading__accent_word:before { content: ""; position: absolute; z-index: -1; left: -7px; right: -7px; bottom: -2px; top: -2px; transform: rotate(-1deg) scaleX(0); transition: transform 0.7s cubic-bezier(0.77, 0.31, 0, 0.975); transform-origin: left center; } .heading__accent_word.state-active:before { transform: rotate(-1deg) scaleX(1); } .heading__accent_word--white:before { background-color: rgba(255, 255, 255, 0.1); } .heading__accent_word--accent:before { background-color: rgba(77, 97, 252, 0.12); } .heading__opaque_word { opacity: 0.5; } .subheading { text-transform: uppercase; color: #23273E; font-size: 12px; font-weight: 700; line-height: 1.4; } .text, .pricing-04__item_text, .features-05__item_text { line-height: 1.4; } .white-text, .text-white { color: white; } .text-center, .center-text { text-align: center; } .burger { display: inline-block; position: relative; opacity: 0.7; padding: 15px 15px; border-radius: 50%; font-size: 0; cursor: pointer; transition: opacity 0.25s ease; } .burger:active { background-color: rgba(255, 255, 255, 0.1); } .burger:before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border-radius: 9999px; width: 40px; height: 40px; background-color: rgba(223, 234, 254, 0.2); } .burger--black:before { background-color: rgba(48, 48, 48, 0.08); } .burger:hover { opacity: 1; } .burger__box { width: 12px; height: 14px; display: inline-block; position: relative; } .burger__inner { display: block; top: 50%; margin-top: -1px; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .burger__inner, .burger__inner::before, .burger__inner::after { width: 12px; height: 2px; background-color: white; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .burger--black .burger__inner, .burger--black .burger__inner::before, .burger--black .burger__inner::after { background-color: #303030; } .burger__inner::before, .burger__inner::after { content: ""; display: block; } .burger__inner::before { top: -6px; } .burger__inner::after { bottom: -6px; } .burger__inner::before { transition: top 0.2s 0.12s ease, opacity 0.075s ease; } .burger__inner::after { transition: bottom 0.2s 0.12s ease, transform 0.08s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .state-active-burger .burger__inner { transform: rotate(45deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .state-active-burger .burger__inner::before { top: 0; opacity: 0; transition: top 0.08s ease, opacity 0.08s 0.12s ease; } .state-active-burger .burger__inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.08s ease, transform 0.08s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } .button { overflow: hidden; display: inline-block; position: relative; padding: 12px 20px 12px; min-width: 120px; border: 2px solid transparent; min-height: 44px; border-radius: 4px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); font-size: 20px; font-weight: 700; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center; text-decoration: none; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .button[disabled] { cursor: default; } .button[disabled]:hover, .button[disabled]:focus { transform: none; } .button[disabled]:hover .icon, .button[disabled]:focus .icon { transform: none; } .button[disabled]:active { transform: none; outline: none; } .button[disabled]:not(.state-show-success-tick):not(.state-show-spinner) { opacity: 0.4; } .button .icon { display: inline-block; vertical-align: middle; height: 1em; width: 1em; margin-left: 7px; transition: opacity 0.2s ease, transform 0.2s ease; } .button:hover, .button:focus { transform: translateY(-2px); box-shadow: 0 2px 8px 0 rgba(136, 144, 195, 0.22), 0 8px 15px 0 rgba(37, 44, 97, 0.17); } .button:hover .icon, .button:focus .icon { transform: translateX(3px); } .button:active { transform: translateY(-1px); box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); outline: none; } .button--accent-outline { background-color: transparent; border-color: #23273E; color: #23273E; } .button--accent-outline .icon svg *, .button--accent-outline .button__system_icon svg * { fill: #23273E; } .button--accent-bg { background-color: #23273E; color: white; } .button--accent-bg .icon svg *, .button--accent-bg .button__system_icon svg * { fill: white; } .button--accent-bg:hover { background-color: #23273E; } .button--black-outline { background-color: transparent; border-color: #303030; color: #303030; } .button--black-outline .icon svg *, .button--black-outline .button__system_icon svg * { fill: #303030; } .button--black-bg { background-color: #303030; color: white; } .button--black-bg .icon svg *, .button--black-bg .button__system_icon svg * { fill: white; } .button--black-bg:hover { background-color: black; } .button--midnight-outline { background-color: transparent; border-color: #00396B; color: #00396B; } .button--midnight-outline .icon svg *, .button--midnight-outline .button__system_icon svg * { fill: #00396B; } .button--midnight-bg { background-color: #00396B; color: white; } .button--midnight-bg .icon svg *, .button--midnight-bg .button__system_icon svg * { fill: white; } .button--midnight-bg:hover { background-color: #23273E; } .button--acid-outline { background-color: transparent; border-color: #4ADDB4; color: #4ADDB4; } .button--acid-outline .icon svg *, .button--acid-outline .button__system_icon svg * { fill: #4ADDB4; } .button--acid-bg { background-color: #4ADDB4; color: white; } .button--acid-bg .icon svg *, .button--acid-bg .button__system_icon svg * { fill: white; } .button--acid-bg:hover { background-color: #35d9ab; } .button--emerald-outline { background-color: transparent; border-color: #4BCA81; color: #4BCA81; } .button--emerald-outline .icon svg *, .button--emerald-outline .button__system_icon svg * { fill: #4BCA81; } .button--emerald-bg { background-color: #4BCA81; color: white; } .button--emerald-bg .icon svg *, .button--emerald-bg .button__system_icon svg * { fill: white; } .button--emerald-bg:hover { background-color: #39c273; } .button--ruby-outline { background-color: transparent; border-color: #C23934; color: #C23934; } .button--ruby-outline .icon svg *, .button--ruby-outline .button__system_icon svg * { fill: #C23934; } .button--ruby-bg { background-color: #C23934; color: white; } .button--ruby-bg .icon svg *, .button--ruby-bg .button__system_icon svg * { fill: white; } .button--ruby-bg:hover { background-color: #ae332f; } .button--alt-accent-outline { background-color: transparent; border-color: #F90473; color: #F90473; } .button--alt-accent-outline .icon svg *, .button--alt-accent-outline .button__system_icon svg * { fill: #F90473; } .button--alt-accent-bg { background-color: #F90473; color: white; } .button--alt-accent-bg .icon svg *, .button--alt-accent-bg .button__system_icon svg * { fill: white; } .button--alt-accent-bg:hover { background-color: #e00467; } .button--white-outline { background-color: transparent; border-color: white; color: white; } .button--white-outline .icon svg *, .button--white-outline .button__system_icon svg * { fill: white; } .button--white-bg { background-color: #F6F6F6; color: #303030; } .button--white-bg .icon svg *, .button--white-bg .button__system_icon svg * { fill: #00396B; } .button--large { min-height: 51px; } .button--small { padding: 6px 10px; min-height: 32px; } .button--empty { min-width: auto; background-color: transparent; border-color: transparent; box-shadow: none; } .button--empty:hover { box-shadow: none; background-color: rgba(233, 241, 255, 0.7); } .button--empty.button--white-outline:hover { background-color: rgba(255, 255, 255, 0.1); } .button.state-show-success-tick { border-color: #4BCA81; } .button--vendor-logo { padding-left: 60px; } button.button { padding-top: 11px; padding-bottom: 11px; } .button__system_icon, .button__chrome_icon { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); height: 30px; width: 20px; } .button__system_icon svg, .button__chrome_icon svg { height: 100%; } .button__system_icon:after, .button__chrome_icon:after { content: ""; width: 1px; position: absolute; right: -15px; top: 0; bottom: 0; background-color: rgba(70, 70, 70, 0.12); transform: scaleY(20); } .button--black-bg .button__system_icon:after, .button--midnight-bg .button__system_icon:after, .button--black-bg .button__chrome_icon:after, .button--midnight-bg .button__chrome_icon:after { background-color: rgba(255, 255, 255, 0.12); } .button__text { vertical-align: middle; transition: opacity 0.2s ease, transform 0.2s ease; } .state-show-spinner .button__text { opacity: 0; transform: translateX(10px); } .state-show-spinner.button .icon { opacity: 0; transform: translateX(10px); } .button .spinner { position: absolute; opacity: 0; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } .state-show-spinner.button .spinner { opacity: 1; } .button__submit_success { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } .button__success_circle { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; transform: scale(0); opacity: 0; background-color: #4BCA81; transition: transform 0.5s ease-out, opacity 0.5s ease; } .state-show-success-tick .button__success_circle { opacity: 1; transform: scale(10); transition: transform 0.5s ease-out; } .button__success_tick { position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 10; margin: auto; } .button__success_tick_path { stroke-dasharray: 20; stroke-dashoffset: 20; } .state-show-success-tick .button__success_tick_path { transition: stroke-dashoffset 0.5s 0.2s ease; stroke-dashoffset: 0; } .text-input { width: 100%; border-radius: 4px; padding: 0 20px; height: 44px; background-color: rgba(246, 246, 246, 0.3); border: 2px solid #D8DDE6; font-size: 14px; transition: border-color 0.2s ease, background-color 0.2s ease; } .text-input::-webkit-input-placeholder { opacity: 0.5; font-size: inherit; color: inherit; transition: opacity 0.2s ease, transform 0.2s ease; } .text-input:-moz-placeholder { opacity: 0.5; font-size: inherit; color: inherit; transition: opacity 0.2s ease, transform 0.2s ease; } .text-input::-moz-placeholder { opacity: 0.5; font-size: inherit; color: inherit; transition: opacity 0.2s ease, transform 0.2s ease; } .text-input:-ms-input-placeholder { opacity: 0.5; font-size: inherit; color: inherit; transition: opacity 0.2s ease, transform 0.2s ease; } .text-input:hover { border-color: #a3afc4; } .text-input:focus { border-color: #23273E; background-color: rgba(246, 246, 246, 0.2); } .text-input:focus::-webkit-input-placeholder { opacity: 0; transform: translateX(10px); } .text-input:focus:-moz-placeholder { opacity: 0; transform: translateX(10px); } .text-input:focus::-moz-placeholder { opacity: 0; transform: translateX(10px); } .text-input:focus:-ms-input-placeholder { opacity: 0; transform: translateX(10px); } .text-input--white { color: white; } .text-input--black { background-color: rgba(0, 57, 107, 0.4); box-shadow: inset 0 2px 8px 0 rgba(0, 0, 0, 0.05); border-radius: 4px; border-color: rgba(0, 57, 107, 0.15); color: white; } .text-input--black::-webkit-input-placeholder { opacity: 0.7; color: white; } .text-input--black:-moz-placeholder { opacity: 0.7; color: white; } .text-input--black::-moz-placeholder { opacity: 0.7; color: white; } .text-input--black:-ms-input-placeholder { opacity: 0.7; color: white; } .text-input--black:focus { border-color: white; } .store-button { display: inline-block; border-radius: 4px; height: 44px; width: 130px; background-color: black; text-align: center; transition: background-color 0.2s ease, transform 0.2s ease, -webkit-filter 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, filter 0.2s ease, border-color 0.2s ease; } .store-button:hover { background-color: #23273E; transform: translateY(-2px); } .store-button--white { border: 1px solid white; } .store-button--white:hover { border-color: #23273E; } @media (max-width: 500px) { .store-button { width: 120px; } } .store-button__img { height: 100%; } .store-button__img svg { height: 100%; vertical-align: middle; } .pill-link { display: inline-flex; align-items: center; border-radius: 9999px; padding: 5px 15px 5px 6px; text-decoration: none; transition: background-color 0.2s ease; } .pill-link--blue { background-color: #DFEAFE; color: #23273E; } .pill-link--blue:hover { background-color: #cbddfd; color: #23273E; } .pill-link--black { background-color: rgba(48, 48, 48, 0.12); color: white; } .pill-link--black:hover { background-color: rgba(48, 48, 48, 0.2); color: white; } .pill-link--green { background-color: rgba(75, 202, 129, 0.12); color: #4BCA81; } .pill-link--green:hover { background-color: rgba(75, 202, 129, 0.185); color: #4BCA81; } .pill-link--small { min-height: 25px; font-size: 14px; border-radius: 25px; } .pill-link__pill { height: 24px; line-height: 24px; border-radius: 24px; padding: 0 7px; background-color: #23273E; color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .pill-link--small .pill-link__pill { height: 15px; line-height: 16px; padding: 0 7px; border-radius: 15px; font-size: 9px; } .pill-link--green .pill-link__pill { background-color: #4BCA81; } .pill-link__text { margin-left: 10px; margin-bottom: 1px; } .pill-link__icon { margin-left: 9px; height: 1em; width: 1em; transform-origin: right center; transition: transform 0.2s ease; } .pill-link:hover .pill-link__icon { transform: translateX(3px); } .pill-link__icon svg * { fill: #23273E; } .pill-link--black .pill-link__icon svg * { fill: white; } .pill-link--green .pill-link__icon svg * { fill: #4BCA81; } .tag { display: inline-block; padding: 4px 12px; border-radius: 99px; font-weight: 700; font-size: 10px; letter-spacing: 0.03em; background-color: #23273E; color: white; text-transform: uppercase; } .tag--blue { background-color: rgba(77, 97, 252, 0.2); color: #23273E; } .tag--magenta { background-color: rgba(249, 4, 115, 0.2); color: #F90473; } .tag--black { background-color: #303030; } .tag--green { background-color: rgba(75, 202, 129, 0.2); color: #4BCA81; } .tag--acid { background-color: rgba(74, 221, 180, 0.2); color: #4ADDB4; } .tag--night { background-color: #00396B; } .tag--yellow { background-color: #ffeb3b; color: #303030; } .tab { display: inline-block; margin: 0 1px; margin-bottom: 5px; } .tab__button { display: inline-block; padding: 7px 10px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; font-weight: 700; } .tab__button:hover, .tab__button:focus { background-color: #e8ebf0; } .tab__button.state-active-tab, .tab__button.state-active-tab:hover, .tab__button--active:focus { background-color: #DFEAFE; color: #23273E; cursor: default; } .link_badge { position: absolute; right: -6px; top: 50%; padding: 2px 4px; border-radius: 3px; transform: translateX(100%) translateY(-50%); background-color: #4ADDB4; font-weight: 700; text-transform: uppercase; color: white; font-size: 10px; } .link_badge--blue { background-color: #23273E; } .link_badge--magenta { background-color: #F90473; } .link_badge--black { background-color: #303030; } .link_badge--green { background-color: #4BCA81; } .link_badge--acid { background-color: #4ADDB4; } .link_badge--night { background-color: #00396B; } .link_badge--yellow { background-color: #ffeb3b; color: #303030; } .circle-button { display: inline-flex; align-content: center; justify-content: center; position: relative; border-radius: 99px; height: 60px; width: 60px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .circle-button--play .icon { position: relative; left: 3px; } .circle-button:hover { transform: translateY(-2px); } .circle-button .icon { width: 22px; height: 22px; display: flex; justify-content: center; align-items: center; } .circle-button .icon svg { width: 100%; height: 100%; } .circle-button .icon svg * { transition: fill 0.2s ease; } .circle-button--blue-bg { background-color: #23273E; box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.17); color: white; } .circle-button--blue-bg svg * { fill: white; } .circle-button--blue-bg:hover { box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.2); } .circle-button--blue-bg .circle-button__hover_bg { background-color: #23273E; } .circle-button--transparent { background-color: transparent; } .circle-button--transparent .circle-button__hover_bg { background-color: white; } .circle-button--transparent svg * { fill: white; } .circle-button--light-blue-bg { background-color: #DFEAFE; } .circle-button--light-blue-bg:hover { background-color: #23273E; box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.17); } .circle-button--light-blue-bg:hover svg * { fill: white; } .circle-button--light-blue-bg svg * { fill: #23273E; } .emoji { position: relative; vertical-align: middle; bottom: 1px; max-height: 1em; } .emoji--large { height: 55px; max-height: 100%; } .heading .emoji, .text--04__big_text .emoji { margin-left: 0.3em; margin-right: 0.3em; } .pointed-badge { display: inline-block; position: relative; height: 22px; line-height: 22px; font-weight: 700; font-size: 12px; color: white; } .pointed-badge:before { position: absolute; content: ""; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent transparent; } .pointed-badge--left { padding: 0 10px 0 3px; border-radius: 0 99px 99px 0; } .pointed-badge--right { padding: 0 3px 0 10px; border-radius: 99px 0 0 99px; } .pointed-badge--left:before { left: 0; transform: translateX(-100%); border-width: 11px 12px 11px 0; } .pointed-badge--right:before { right: 0; transform: translateX(100%); border-width: 11px 0 11px 12px; } .pointed-badge--blue-bg { background-color: #23273E; } .pointed-badge--blue-bg.pointed-badge--left:before { border-right-color: #23273E; } .pointed-badge--blue-bg.pointed-badge--right:before { border-left-color: #23273E; } .pointed-badge--green-bg { background-color: #4BCA81; } .pointed-badge--green-bg.pointed-badge--left:before { border-right-color: #4BCA81; } .pointed-badge--green-bg.pointed-badge--right:before { border-left-color: #4BCA81; } .pointed-badge--magenta-bg { background-color: #F90473; } .pointed-badge--magenta-bg.pointed-badge--left:before { border-right-color: #F90473; } .pointed-badge--magenta-bg.pointed-badge--right:before { border-left-color: #F90473; } .pointed-badge--acid-bg { background-color: #4ADDB4; } .pointed-badge--acid-bg.pointed-badge--left:before { border-right-color: #4ADDB4; } .pointed-badge--acid-bg.pointed-badge--right:before { border-left-color: #4ADDB4; } .pointed-badge__text { margin-right: 5px; } .profile-picture { display: inline-block; border-radius: 50%; height: 50px; width: 50px; box-shadow: 0 5px 15px rgba(34, 40, 89, 0.2); } .profile-picture--large { height: 100px; width: 100px; } .profile-picture--small { height: 30px; width: 30px; } .radio { display: inline-block; position: relative; } .radio__input { position: absolute; z-index: 100; opacity: 0; height: 14px; width: 14px; cursor: pointer; } .radio__input:checked ~ .radio__check:before { transform: none; opacity: 1; } .radio__input:checked ~ .radio__check:after { background-color: #4BCA81; transform: scale(1.2); } .radio:hover .radio__input:not(:disabled) ~ .radio__check { background-color: #b9c2d2; } .radio__input:disabled ~ .radio__check, .radio__input:disabled ~ .radio__label { opacity: 0.6; cursor: default; } .radio__input:focus ~ .radio__check, .radio__input:active ~ .radio__check { background-color: #9aa7be; } .radio__label { vertical-align: middle; cursor: pointer; } .radio__check { position: relative; display: inline-block; vertical-align: middle; margin-right: 7px; height: 14px; width: 14px; background-color: #D8DDE6; border-radius: 50%; cursor: pointer; transition: background-color 0.2s ease; } .radio__check:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; height: 10px; width: 10px; margin: auto; border-radius: 50%; background-color: white; transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .radio__check:before { content: ""; position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border-radius: 50%; background-color: #23273E; opacity: 0; transform: scale(0); transition: opacity 0.2s 0.05s ease, transform 0.2s 0.05s ease; } .radio__dot { position: absolute; z-index: 50; left: 0; right: 0; bottom: 0; top: 0; margin: auto; height: 4px; width: 4px; border-radius: 50%; background-color: white; } .checkbox { display: inline-block; position: relative; width: 16px; height: 16px; } .checkbox__input { position: absolute; z-index: 100; opacity: 0; height: 16px; width: 16px; left: 0; top: 0; cursor: pointer; } .checkbox__input:checked:hover ~ .checkbox__check:before { background-color: #344bfc; } .checkbox__input:checked ~ .checkbox__check:before { transform: none; opacity: 1; } .checkbox__input:checked ~ .checkbox__check:after { background-color: #4BCA81; transform: scale(1.2); } .checkbox__input:disabled ~ .checkbox__check, .checkbox__input:disabled ~ .checkbox__label { opacity: 0.6; cursor: default; } .checkbox:hover .checkbox__input:not(:disabled) ~ .checkbox__check { background-color: #b9c2d2; } .checkbox__input:focus ~ .checkbox__check, .checkbox__input:active ~ .checkbox__check { background-color: #9aa7be; } .checkbox__label { vertical-align: middle; cursor: pointer; } .checkbox__check { position: absolute; display: inline-block; vertical-align: middle; left: 0; top: 0; border-radius: 2px; overflow: hidden; height: 16px; width: 16px; background-color: #D8DDE6; cursor: pointer; transition: background-color 0.2s ease; } .checkbox__check:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; height: 12px; width: 12px; margin: auto; background-color: white; transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .checkbox__check:before { content: ""; position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-color: #23273E; opacity: 0; transform: scale(0); transition: opacity 0.2s 0.05s ease, transform 0.2s 0.05s ease; } .checkbox__icon { position: absolute; z-index: 50; left: 0; right: 0; bottom: 0; top: 0; margin: auto; height: 8px; width: 8px; } .mockup__case { display: inline-block; position: relative; } .mockup--black .mockup__case { background-color: #303030; } .mockup--white .mockup__case { background-color: white; } .mockup--iphone .mockup__case, .mockup--ipad .mockup__case { box-shadow: 0px 5px 43px 0 rgba(0, 0, 0, 0.09); } .mockup--iphone.mockup--portrait .mockup__case { max-width: 286px; width: 100%; border-radius: 16%/7.62%; } .mockup--iphone.mockup--portrait .mockup__case .mockup__spacer { padding-top: 209.79021%; } .mockup--iphone.mockup--landscape .mockup__case { max-width: 600px; width: 100%; border-radius: 7.62%/16%; } .mockup--iphone.mockup--landscape .mockup__case .mockup__spacer { padding-top: 47.66667%; } .mockup--ipad.mockup--portrait .mockup__case { max-width: 600px; width: 100%; border-radius: 40px; border-radius: 7.5%/5%; } .mockup--ipad.mockup--portrait .mockup__case .mockup__spacer { padding-top: 150%; } .mockup--ipad.mockup--landscape .mockup__case { max-width: 900px; width: 100%; border-radius: 5%/7.5%; } .mockup--ipad.mockup--landscape .mockup__case .mockup__spacer { padding-top: 66.66667%; } .mockup--macbook .mockup__case { width: 73.3%; border-radius: 4.5%/6.39%; background-color: #FDFEFF; box-shadow: 0 0 0 1px rgba(52, 63, 75, 0.02), 0 10px 60px 0 rgba(52, 63, 75, 0.08), 0 10px 30px 0 rgba(52, 63, 75, 0.06); } .mockup--macbook .mockup__case .mockup__spacer { padding-top: 70.2%; } .mockup__speaker { position: absolute; } .mockup--black .mockup__speaker { background-color: #2A2A2A; box-shadow: inset 0 26px 35px 0 rgba(0, 0, 0, 0.04); } .mockup--white .mockup__speaker { background-color: #FFFFFF; box-shadow: inset 0 3px 24px 0 rgba(0, 0, 0, 0.07); } .mockup--ipad .mockup__speaker { display: block; border-radius: 50%; } .mockup--ipad .mockup__speaker:before { content: ""; display: block; padding-bottom: 100%; } .mockup--iphone .mockup__speaker { border-radius: 8px; } .mockup--iphone.mockup--portrait .mockup__speaker { left: 0; right: 0; top: 5.9%; margin: auto; width: 15%; height: 1.3%; } .mockup--iphone.mockup--landscape .mockup__speaker { height: 15%; width: 1.3%; left: 5.7%; top: 50%; transform: translateY(-50%); } .mockup--ipad.mockup--portrait .mockup__speaker { left: 0; right: 0; top: 4.2%; margin: auto; width: 2.67%; } .mockup--ipad.mockup--landscape .mockup__speaker { left: 4.2%; top: 50%; transform: translateY(-50%); width: 1.91%; } .mockup__screen { position: absolute; border-radius: 4px; } .mockup--white .mockup__screen { border: 2px solid #F6F6F6; } .mockup--black .mockup__screen { border: 2px solid #272727; } .mockup--iphone.mockup--portrait .mockup__screen { left: 0; right: 0; top: 12%; margin: auto; width: 85%; } .mockup--iphone.mockup--portrait .mockup__screen:before { content: ""; display: block; padding-bottom: 182%; } .mockup--iphone.mockup--landscape .mockup__screen { left: 12%; top: 50%; transform: translateY(-50%); width: 73.4%; } .mockup--iphone.mockup--landscape .mockup__screen:before { content: ""; display: block; padding-bottom: 56%; } .mockup--ipad.mockup--portrait .mockup__screen { left: 0; right: 0; top: 9.7%; margin: auto; width: 89.3%; } .mockup--ipad.mockup--portrait .mockup__screen:before { content: ""; display: block; padding-bottom: 132.8%; } .mockup--ipad.mockup--landscape .mockup__screen { left: 9.7%; top: 50%; transform: translateY(-50%); width: 78.6%; } .mockup--ipad.mockup--landscape .mockup__screen:before { content: ""; display: block; padding-bottom: 75.4%; } .mockup--macbook .mockup__screen { left: 0; right: 0; top: 7.4%; margin: auto; width: 92.5%; } .mockup--macbook .mockup__screen:before { content: ""; display: block; padding-bottom: 62.3%; } @media (max-width: 500px) { .mockup__screen { border-radius: 2px; border-width: 1px; } } .mockup__screenshot { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-size: cover; background-position: center top; background-repeat: no-repeat; } .mockup__button { position: absolute; border-radius: 50%; } .mockup__button:before { content: ""; display: block; padding-bottom: 100%; } .mockup--black .mockup__button { background-color: #2A2A2A; box-shadow: inset 0 26px 35px 0 rgba(0, 0, 0, 0.04); } .mockup--white .mockup__button { background-color: #FFFFFF; box-shadow: inset 0 26px 35px 0 rgba(0, 0, 0, 0.04); } .mockup--iphone.mockup--portrait .mockup__button { left: 0; right: 0; bottom: 3.9%; margin: auto; width: 15.4%; } .mockup--iphone.mockup--landscape .mockup__button { right: 3.9%; top: 50%; transform: translateY(-50%); width: 7.35%; } .mockup--ipad.mockup--portrait .mockup__button { left: 0; right: 0; bottom: 3.1%; margin: auto; width: 7.35%; } .mockup--ipad.mockup--landscape .mockup__button { right: 3.5%; top: 50%; transform: translateY(-50%); width: 4.9%; } .mockup__container { position: relative; max-width: 1228px; text-align: center; } .mockup__bottom { position: absolute; bottom: -23%; left: 0; right: 0; margin: auto; width: 100%; } .spinner, .spinner:after { border-radius: 50%; width: 15px; height: 15px; } .spinner { position: relative; transform: translateZ(0); animation: spin 1.1s infinite linear; border-top: 2px solid rgba(255, 255, 255, 0.4); border-right: 2px solid rgba(255, 255, 255, 0.4); border-bottom: 2px solid rgba(255, 255, 255, 0.4); border-left: 2px solid #ffffff; font-size: 10px; text-indent: -9999px; transition: opacity 0.2s ease; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .score { text-align: center; } .score__stars { padding: 8px 0; margin: 15px 0 7px; background-color: #E9F1FF; border-radius: 4px; } .score__star { display: inline-block; margin: 0 2px; } .score__text { font-size: 12px; line-height: 1.4; } .score__word { margin-right: 4px; color: #9aa7be; } .score__value { color: #23273E; font-weight: 700; } .via-unicorn-platform { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 7px 15px; } .via-unicorn-platform__link { vertical-align: middle; text-decoration: none; font-size: 10px; color: inherit; letter-spacing: 0.02em; } .via-unicorn-platform__link:hover { color: #23273E; } .buttons-set__list { padding: 0; margin: 0; list-style: none; margin-left: -7px; } @media (max-width: 500px) { .buttons-set__list { margin-left: 0; } } .buttons-set__item { display: inline-block; vertical-align: middle; margin-left: 7px; margin-right: 6px; padding-bottom: 14px; font-size: 0; } @media (max-width: 500px) { .buttons-set__item { display: flex; justify-content: center; width: 100%; margin-left: 0; margin-right: 0; } } .buttons-set__info { padding-left: 5px; font-size: 14px; } .feature--white * { color: white; fill: white; } .feature--center { text-align: center; } .feature--center .feature__icon { display: block; margin: auto auto 10px auto; } .feature__title { margin-top: 0; margin-bottom: 15px; } .feature__title_text { text-transform: uppercase; font-size: 16px; } .feature__content { margin: auto; } .feature__icon { vertical-align: middle; margin-right: 15px; max-height: 40px; max-width: 40px; width: 100%; } .feature__link { position: relative; display: inline-block; margin-top: 15px; font-weight: 700; text-decoration: none; } .feature__link:hover .icon { transform: translateX(2px); } .feature__link:hover .icon * { fill: #F90473; } .feature__link .icon { display: inline-block; vertical-align: middle; margin-left: 7px; width: 1em; transition: transform 0.2s ease; } .feature__link .icon * { fill: #23273E; } .feature__link--white * { color: white; transition: opacity 0.25s ease, transform 0.25s ease; } .feature__link--white *:hover { opacity: 0.8; } .feature__link--white .icon * { fill: white; } .logos__list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .logos__img { max-height: 50px; } .form__inputs { display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; } @media (max-width: 400px) { .form__inputs { display: block; } } .form__input { position: relative; flex: 1 1 auto; width: 1%; } @media (max-width: 400px) { .form__input { width: 100%; } } .form__button { margin-left: 15px; } @media (max-width: 400px) { .form__button { margin-left: 0; margin-top: 15px; margin-bottom: 15px; text-align: center; } .form__button .button { width: 100%; } } .state-show-spinner .form__button .spinner { transform: translateY(-50%) translateX(0); opacity: 1; } .form__messages { position: absolute; z-index: 100; width: 100%; margin-top: 10px; } .form__message_opener { margin-top: 10px; text-align: center; } .form__message_opener--black .form__message_opener_box { opacity: 0.8; color: white; background-color: rgba(216, 221, 230, 0.05); } .form__message_opener--black .form__message_opener_box:hover { opacity: 1; background-color: rgba(216, 221, 230, 0.2); } .form__message_opener_box { display: inline-block; padding: 5px 10px; cursor: pointer; border-radius: 4px; background-color: #F6F6F6; color: #23273E; transition: background-color 0.2s ease, opacity 0.2s ease; } .form__message_opener_box .emoji { margin-left: 0.3em; } .form__message_opener_box:hover { background-color: #E9F1FF; } .message { overflow: hidden; border-radius: 4px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; opacity: 0; transform: translateY(10px) scale(0.99); transform-origin: center; transition: opacity 0.2s ease, transform 0.2s ease; visibility: hidden; height: 0; } .message.state-visible { opacity: 1; transform: none; } .message.state-visible { visibility: visible; height: auto; } .message__box { border-bottom: 2px solid transparent; } .message--engaging .message__box { border-color: #23273E; } .message--engaging .message__box .message__bubble_text--out { color: white; background-color: #23273E; } .message--success .message__box { border-color: #4BCA81; } .message--success .message__box .message__bubble_text--out { color: white; background-color: #4BCA81; } .message--error .message__box { border-color: #C23934; } .message--error .message__box .message__bubble_text--out { color: white; background-color: #C23934; } .message__close { display: block; width: 100%; cursor: pointer; text-align: center; transition: background-color 0.2s ease; } .message__close:hover { background-color: #E9F1FF; } .message__close_icon { display: inline-block; padding: 10px 0 7px; } .message__body { padding: 20px 20px 30px; margin-left: auto; margin-right: auto; max-width: 500px; } .message__in { text-align: left; } .message__out { display: flex; justify-content: flex-end; margin-top: 20px; } .message__out_box { display: flex; flex-direction: column; align-items: flex-end; } .message__bubble { overflow: auto; margin-bottom: 7px; font-size: 14px; } .message__bubble:last-child { margin-bottom: 0; } .message__bubble_text { display: inline-block; border-radius: 30px; padding: 10px 20px; background-color: #F6F6F6; line-height: 1.4; } .message__bubble_text .emoji { margin-left: 0.3em; margin-right: 0.3em; } .message__in .message__bubble { opacity: 0; transform: scale(0.95) translateY(5px); transition: opacity 0.4s ease, transform 0.4s ease; } .state-visible .message__in .message__bubble { opacity: 1; transform: none; } .state-visible .message__in .message__bubble:nth-child(1) { transition-delay: 150ms; } .state-visible .message__in .message__bubble:nth-child(2) { transition-delay: 800ms; } .state-visible .message__in .message__bubble:nth-child(3) { transition-delay: 1450ms; } .state-visible .message__in .message__bubble:nth-child(4) { transition-delay: 2100ms; } .state-visible .message__in .message__bubble:nth-child(5) { transition-delay: 2750ms; } .state-visible .message__in .message__bubble:nth-child(6) { transition-delay: 3400ms; } .state-visible .message__in .message__bubble:nth-child(7) { transition-delay: 4050ms; } .state-visible .message__in .message__bubble:nth-child(8) { transition-delay: 4700ms; } .state-visible .message__in .message__bubble:nth-child(9) { transition-delay: 5350ms; } .state-visible .message__in .message__bubble:nth-child(10) { transition-delay: 6000ms; } .message__out .message__bubble { opacity: 0; transform: scale(0.95) translateY(5px); transition: opacity 0.4s ease, transform 0.4s ease; } .state-reacted .message__out .message__bubble { opacity: 1; transform: none; } .message__bubble_error { margin-top: 5px; color: #C23934; font-family: Courier, monospace; } .message__bubble_link { color: #23273E; text-decoration: underline; } .message__bubble_link:hover { color: #2a42fb; } .message__reply_box { position: relative; border-top: 1px solid #D8DDE6; } .message__reply_word { display: inline-block; position: absolute; z-index: 10; top: 0; left: 40px; transform: translateY(-50%); padding: 5px 10px; font-size: 12px; background-color: white; color: #D8DDE6; } .message__options { display: flex; justify-content: center; position: relative; z-index: 50; padding: 20px 25px; } .message__option { padding: 0 10px; } .message__option .button { min-width: auto; } .message__option { opacity: 0.15; transform: translateY(10px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } .state-visible .message__option:nth-child(1) { transition-delay: 1400ms; } .state-visible .message__option:nth-child(2) { transition-delay: 1650ms; } .state-visible .message__option:nth-child(3) { transition-delay: 1900ms; } .state-visible .message__option:nth-child(4) { transition-delay: 2150ms; } .state-visible .message__option:nth-child(5) { transition-delay: 2400ms; } .state-visible .message__option:nth-child(6) { transition-delay: 2650ms; } .state-visible .message__option:nth-child(7) { transition-delay: 2900ms; } .state-visible .message__option:nth-child(8) { transition-delay: 3150ms; } .state-visible .message__option:nth-child(9) { transition-delay: 3400ms; } .state-visible .message__option:nth-child(10) { transition-delay: 3650ms; } .state-visible .message__option { opacity: 1; transform: none; } .rich_download_app { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; } .rich_download_app--center { justify-content: center; } .rich_download_app--center .rich_download_app__item { margin-right: 8px; margin-left: 8px; } .rich_download_app__item { margin-right: 15px; } .slider { position: relative; } .slider__arrow { position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); } .slider__arrow--prev { left: 0; } .slider__arrow--next { right: 0; } @media (max-width: 1275px) { .slider__arrow { display: none; } } .slider__box { padding: 0; margin: 0; list-style: none; } .slick-slide { outline: none; } .slider__img { width: 100%; } .slick-dots { padding: 0; margin: 0; list-style: none; position: absolute; bottom: -60px; left: 0; right: 0; margin: auto; } .slick-dots li { display: inline-block; margin: 0 6px; } .slick-dots li:hover:not(.slick-active) button { transform: translateY(-1px); } .slick-dots li.slick-active button { transform: translateY(-1px); background-color: #23273E; box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.18); } .slick-dots button { height: 20px; width: 20px; border-radius: 50%; background-color: #DFEAFE; font-size: 0; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .title-box { margin-bottom: 50px; max-width: 700px; } .title-box--center { margin-left: auto; margin-right: auto; text-align: center; } .title-box--center .title-box__text { margin-left: auto; margin-right: auto; } .title-box__text { opacity: 0.9; max-width: 80%; } @media (max-width: 500px) { .title-box__text { max-width: 100%; } } .social-buttons--left .social-buttons__list { justify-content: flex-start; } .social-buttons--left .social-buttons__item { margin: 0 12px 12px 0; } .social-buttons--right .social-buttons__list { justify-content: flex-end; } .social-buttons--right .social-buttons__item { margin: 0 0 12px 12px; } .social-buttons__list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .social-buttons__item { margin: 0 6px 5px; } .social-buttons__link { display: inline-block; text-decoration: none; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .social-buttons__link--circle { display: inline-flex; justify-content: center; align-items: center; flex-wrap: wrap; border-radius: 50%; height: 30px; width: 30px; background-color: #00396B; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); cursor: pointer; } .social-buttons__link--circle:hover, .social-buttons__link--circle:focus { transform: translateY(-2px); box-shadow: 0 2px 8px 0 rgba(136, 144, 195, 0.22), 0 8px 15px 0 rgba(37, 44, 97, 0.17); } .social-buttons__link--circle .social-buttons__icon { opacity: 0.9; max-width: 12px; max-height: 12px; } .social-buttons__icon { max-width: 18px; max-height: 18px; } .nav-01 { position: absolute; z-index: 200; top: 0; right: 0; left: 0; padding: 30px 0; } @media (max-width: 1300px) { .nav-01 { padding: 20px 0; } } @media (max-width: 900px) { .nav-01 { position: fixed; padding: 10px 0; background-color: #303030; } } .nav-01__box { display: flex; justify-content: space-between; align-items: center; } .nav-01__logo { position: relative; z-index: 50; } .nav-01__link { display: inline-block; text-decoration: none; transition: opacity 0.25s ease; } .nav-01__link:hover { opacity: 0.7; } .nav-01__logo_img { vertical-align: middle; max-height: 30px; margin-right: 10px; } .nav-01__logo_text { vertical-align: middle; font-weight: 700; letter-spacing: 0.01em; font-size: 16px; } .nav-01__list { padding: 0; margin: 0; list-style: none; } @media (max-width: 900px) { .nav-01__list { opacity: 0; visibility: hidden; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column-reverse; position: fixed; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-color: #23273E; transition: opacity 0.25s ease, transform 0.25s ease; } .state-opened-menu .nav-01__list { visibility: visible; opacity: 1; } } .nav-01__item { display: inline-block; margin-right: 15px; } .nav-01__item:last-child { margin-right: 0; } @media (max-width: 900px) { .nav-01__item { transform: translateY(5px); opacity: 0; margin-right: 0; margin-bottom: 10px; text-align: center; transition: opacity 0.2s ease, transform 0.2s ease; } .nav-01__item:nth-child(1) { transition-delay: 140ms; } .nav-01__item:nth-child(2) { transition-delay: 210ms; } .nav-01__item:nth-child(3) { transition-delay: 280ms; } .nav-01__item:nth-child(4) { transition-delay: 350ms; } .nav-01__item:nth-child(5) { transition-delay: 420ms; } .nav-01__item:nth-child(6) { transition-delay: 490ms; } .nav-01__item:nth-child(7) { transition-delay: 560ms; } .nav-01__item:nth-child(8) { transition-delay: 630ms; } .nav-01__item:nth-child(9) { transition-delay: 700ms; } .nav-01__item:nth-child(10) { transition-delay: 770ms; } .state-opened-menu .nav-01__item { opacity: 1; transform: none; } } @media (min-width: 901px) { .nav-01__burger { display: none; } } .nav-02 { position: absolute; z-index: 200; top: 0; right: 0; left: 0; padding: 30px 0; } @media (max-width: 1300px) { .nav-02 { padding: 20px 0; } } @media (max-width: 1300px) { .nav-02 { padding: 20px 0; } } @media (max-width: 900px) { .nav-02 { position: fixed; padding: 10px 0; background-color: white; box-shadow: 0 7px 25px 0 rgba(37, 44, 97, 0.1); } } .nav-02__box { display: flex; justify-content: space-between; align-items: center; } .nav-02__logo { position: relative; z-index: 50; } .nav-02__link { display: inline-block; text-decoration: none; transition: opacity 0.25s ease; } .nav-02__link:hover { opacity: 0.7; } .nav-02__logo_img { vertical-align: middle; max-height: 30px; margin-right: 10px; } .nav-02__logo_text { vertical-align: middle; font-weight: 700; letter-spacing: 0.01em; font-size: 16px; } .nav-02__list { padding: 0; margin: 0; list-style: none; } @media (max-width: 900px) { .nav-02__list { opacity: 0; visibility: hidden; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column-reverse; position: fixed; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-color: white; transition: opacity 0.25s ease, transform 0.25s ease; } .state-opened-menu .nav-02__list { visibility: visible; opacity: 1; } } .nav-02__item { display: inline-block; margin-right: 15px; } .nav-02__item:last-child { margin-right: 0; } @media (max-width: 900px) { .nav-02__item { transform: translateY(5px); opacity: 0; margin-right: 0; margin-bottom: 10px; text-align: center; transition: opacity 0.2s ease, transform 0.2s ease; } .nav-02__item:nth-child(1) { transition-delay: 140ms; } .nav-02__item:nth-child(2) { transition-delay: 210ms; } .nav-02__item:nth-child(3) { transition-delay: 280ms; } .nav-02__item:nth-child(4) { transition-delay: 350ms; } .nav-02__item:nth-child(5) { transition-delay: 420ms; } .nav-02__item:nth-child(6) { transition-delay: 490ms; } .nav-02__item:nth-child(7) { transition-delay: 560ms; } .nav-02__item:nth-child(8) { transition-delay: 630ms; } .nav-02__item:nth-child(9) { transition-delay: 700ms; } .nav-02__item:nth-child(10) { transition-delay: 770ms; } .state-opened-menu .nav-02__item { opacity: 1; transform: none; } } @media (min-width: 901px) { .nav-02__burger { display: none; } } .header-01, .header-10, .header-11, .header-12 { z-index: 100; padding-top: 160px; background-image: linear-gradient(0deg, #2B5BB1 0%, #163E85 100%); text-align: center; } .header-12 { background: none; } .header-01__box, .header-10__box, .header-11__box, .header-12__box { background-size: cover; background-position: center bottom; background-repeat: no-repeat; background-image: url("../img/other/white-waves.svg"); } .header-01__heading, .header-10__heading, .header-11__heading, .header-12__heading { max-width: 600px; margin: auto auto 70px; } .header-01__buttons, .header-10__buttons, .header-11__buttons, .header-12__buttons { margin-bottom: 70px; } .header-01__mockup .mockup__container, .header-10__mockup .mockup__container, .header-11__mockup .mockup__container, .header-12__mockup .mockup__container { margin: auto; } .header-02, .header-21, .header-54 { height: 100vh; } @media (max-width: 900px) { .header-02, .header-21, .header-54 { height: auto; } } .header-02__container, .header-21__container, .header-54__container { height: 100%; } .header-02__wrapper, .header-21__wrapper, .header-54__wrapper { position: relative; display: flex; height: 100%; } @media (max-width: 900px) { .header-02__wrapper, .header-21__wrapper, .header-54__wrapper { display: block; } } .header-02__left, .header-21__left, .header-54__left, .header-02__right, .header-21__right, .header-54__right { display: flex; justify-content: center; align-items: center; width: 50%; } @media (max-width: 900px) { .header-02__left, .header-21__left, .header-54__left, .header-02__right, .header-21__right, .header-54__right { width: 100%; } } .header-02__left, .header-21__left, .header-54__left { padding-left: 15px; padding-right: 15px; } @media (max-width: 900px) { .header-02__left, .header-21__left, .header-54__left { padding-top: 60px; padding-bottom: 40px; text-align: center; } } .header-02__right, .header-21__right, .header-54__right { animation: change-background 35s cubic-bezier(0.49, 0.03, 0, 1) infinite; } @media (max-width: 900px) { .header-02__right, .header-21__right, .header-54__right { padding: 60px 30px; } } .header-02__left_content, .header-21__left_content, .header-54__left_content { max-width: 500px; } .header-02__logo_img, .header-21__logo_img, .header-54__logo_img { max-height: 30px; max-width: 100px; } .header-02__text, .header-21__text, .header-54__text { max-width: 400px; margin-bottom: 40px; } @media (max-width: 900px) { .header-02__text, .header-21__text, .header-54__text { margin-left: auto; margin-right: auto; } } .header-02__mockup, .header-21__mockup, .header-54__mockup { display: inline-block; width: 100%; text-align: center; } .header-02__mockup .mockup, .header-21__mockup .mockup, .header-54__mockup .mockup { width: 100%; } .header-02__mockup .mockup__case, .header-21__mockup .mockup__case, .header-54__mockup .mockup__case { margin: auto; } @keyframes change-background { 0% { background-color: #FF4F00; } 20% { background-color: #23273E; } 40% { background-color: #e4ff1c; } 60% { background-color: #F90473; } 80% { background-color: #54e998; } 100% { background-color: #FF4F00; } } .header-03, .header-13, .header-14, .header-15 { background-size: cover; background-position: center bottom; background-repeat: no-repeat; background-color: #303030; } .header-03__overlay, .header-13__overlay, .header-14__overlay, .header-15__overlay { background-color: rgba(0, 0, 0, 0.65); } .header-03__container, .header-13__container, .header-14__container, .header-15__container { padding-bottom: 100px; padding-top: 170px; } @media (max-width: 900px) { .header-03__container, .header-13__container, .header-14__container, .header-15__container { padding-bottom: 60px; padding-top: 100px; } } .header-03__card_holder, .header-13__card_holder, .header-14__card_holder, .header-15__card_holder { position: relative; text-align: center; } .header-03__card, .header-13__card, .header-14__card, .header-15__card { box-shadow: 0 60px 90px 0 rgba(12, 12, 15, 0.27); border-radius: 10px; } .header-03__card--bottom, .header-13__card--bottom, .header-14__card--bottom, .header-15__card--bottom { position: absolute; left: 0; right: 0; top: 20px; margin: auto; z-index: 10; width: 90%; height: 100%; background-color: rgba(209, 209, 209, 0.8); } .header-03__card--middle, .header-13__card--middle, .header-14__card--middle, .header-15__card--middle { position: absolute; left: 0; right: 0; top: 10px; margin: auto; z-index: 20; width: 95%; height: 100%; background-color: #FDFDFD; } .header-03__card--top, .header-13__card--top, .header-14__card--top, .header-15__card--top { position: relative; padding: 70px 30px 70px; z-index: 30; background-color: white; } @media (max-width: 768px) { .header-03__card--top, .header-13__card--top, .header-14__card--top, .header-15__card--top { padding-top: 40px; padding-bottom: 40px; } } .header-03__card_content, .header-13__card_content, .header-14__card_content, .header-15__card_content { position: relative; z-index: 100; } .header-03__heading, .header-13__heading, .header-14__heading, .header-15__heading { max-width: 580px; margin: auto auto 30px; } .header-03__heading .emoji, .header-13__heading .emoji, .header-14__heading .emoji, .header-15__heading .emoji { margin-left: 0.3em; } @media (max-width: 500px) { .header-03__buttons, .header-13__buttons, .header-14__buttons, .header-15__buttons { text-align: center; } .header-03__buttons .buttons-set__item, .header-13__buttons .buttons-set__item, .header-14__buttons .buttons-set__item, .header-15__buttons .buttons-set__item { display: block; margin: 0 0 15px 0; } .header-03__buttons .buttons-set__item:last-child, .header-13__buttons .buttons-set__item:last-child, .header-14__buttons .buttons-set__item:last-child, .header-15__buttons .buttons-set__item:last-child { margin-bottom: 0; } } .header-03__text, .header-13__text, .header-14__text, .header-15__text { margin: auto auto 40px auto; max-width: 450px; } .header-03__features, .header-13__features, .header-14__features, .header-15__features { padding: 0; margin: 0; list-style: none; position: relative; z-index: 50; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 90px; } @media (max-width: 768px) { .header-03__features, .header-13__features, .header-14__features, .header-15__features { display: block; } } .header-03__feature, .header-13__feature, .header-14__feature, .header-15__feature { width: 30%; padding-right: 15px; } @media (max-width: 768px) { .header-03__feature, .header-13__feature, .header-14__feature, .header-15__feature { width: 100%; margin-bottom: 40px; text-align: center; } .header-03__feature:last-child, .header-13__feature:last-child, .header-14__feature:last-child, .header-15__feature:last-child { margin-bottom: 0; } } .header-03__feature_box, .header-13__feature_box, .header-14__feature_box, .header-15__feature_box { display: inline-block; max-width: 300px; } .header-04__box, .header-16__box, .header-17__box, .header-18__box, .header-55__box { background-size: cover; background-position: center bottom; background-repeat: no-repeat; background-color: #23273E; text-align: center; } .header-04__overlay, .header-16__overlay, .header-17__overlay, .header-55__overlay { background-color: rgba(77, 97, 252, 0.75); } .header-18__overlay { background-color: rgba(48, 48, 48, 0.8); } .header-04__container, .header-16__container, .header-17__container, .header-18__container, .header-55__container { padding-bottom: 100px; padding-top: 200px; } @media (max-width: 1366px) { .header-04__container, .header-16__container, .header-17__container, .header-18__container, .header-55__container { padding-bottom: 80px; padding-top: 120px; } } @media (max-width: 900px) { .header-04__container, .header-16__container, .header-17__container, .header-18__container, .header-55__container { padding-top: 100px; padding-bottom: 40px; } } .header-04__heading, .header-16__heading, .header-17__heading, .header-18__heading, .header-55__heading { max-width: 580px; margin-left: auto; margin-right: auto; } .header-04__heading .emoji, .header-16__heading .emoji, .header-17__heading .emoji, .header-18__heading .emoji, .header-55__heading .emoji { margin-left: 0.3em; } .header-04__buttons, .header-16__buttons, .header-17__buttons, .header-18__buttons, .header-55__buttons { max-width: 500px; margin-left: auto; margin-right: auto; } .header-04__text, .header-16__text, .header-17__text, .header-18__text, .header-55__text { margin: auto auto 60px auto; max-width: 480px; } .header-04__logos, .header-16__logos, .header-17__logos, .header-18__logos, .header-55__logos { margin-top: 170px; } .header-04__logos .logos__img, .header-16__logos .logos__img, .header-17__logos .logos__img, .header-18__logos .logos__img, .header-55__logos .logos__img { opacity: 0.3; } @media (max-width: 1366px) { .header-04__logos, .header-16__logos, .header-17__logos, .header-18__logos, .header-55__logos { margin-top: 120px; } } @media (max-width: 900px) { .header-04__logos, .header-16__logos, .header-17__logos, .header-18__logos, .header-55__logos { margin-top: 120px; } .header-04__logos .logos__item, .header-16__logos .logos__item, .header-17__logos .logos__item, .header-18__logos .logos__item, .header-55__logos .logos__item { width: 50%; margin-bottom: 60px; } } @media (max-width: 500px) { .header-04__logos, .header-16__logos, .header-17__logos, .header-18__logos, .header-55__logos { margin-top: 60px; } .header-04__logos .logos__item, .header-16__logos .logos__item, .header-17__logos .logos__item, .header-18__logos .logos__item, .header-55__logos .logos__item { margin-bottom: 30px; } .header-04__logos .logos__img, .header-16__logos .logos__img, .header-17__logos .logos__img, .header-18__logos .logos__img, .header-55__logos .logos__img { max-height: 16px; } } .header-05__container, .header-19__container, .header-20__container, .header-56__container { position: relative; z-index: 50; padding-top: 100px; } .header-05__left_content, .header-19__left_content, .header-20__left_content, .header-56__left_content { max-width: 530px; } @media (min-width: 1101px) { .header-05__left_content, .header-19__left_content, .header-20__left_content, .header-56__left_content { padding: 70px 0 70px; } } @media (min-width: 1300px) { .header-05__left_content, .header-19__left_content, .header-20__left_content, .header-56__left_content { padding-top: 90px; padding-bottom: 90px; } } @media (min-width: 1600px) { .header-05__left_content, .header-19__left_content, .header-20__left_content, .header-56__left_content { padding-top: 150px; padding-bottom: 150px; } } @media (min-width: 1800px) { .header-05__left_content, .header-19__left_content, .header-20__left_content, .header-56__left_content { padding-top: 200px; padding-bottom: 200px; } } @media (max-width: 1100px) { .header-05__left_content, .header-19__left_content, .header-20__left_content, .header-56__left_content { margin: auto; text-align: center; } } .header-05__text, .header-19__text, .header-20__text, .header-56__text { max-width: 450px; } @media (max-width: 1100px) { .header-05__text, .header-19__text, .header-20__text, .header-56__text { margin-left: auto; margin-right: auto; } } .header-05__cta_box, .header-19__cta_box, .header-20__cta_box, .header-56__cta_box { max-width: 480px; margin-top: 45px; } @media (max-width: 1100px) { .header-05__cta_box, .header-19__cta_box, .header-20__cta_box, .header-56__cta_box { margin-left: auto; margin-right: auto; } } @media (min-width: 1101px) { .header-05__right, .header-19__right, .header-20__right, .header-56__right { position: absolute; overflow: hidden; right: 0; top: 0; height: 100%; width: 100%; } } @media (max-width: 1100px) { .header-05__right, .header-19__right, .header-20__right, .header-56__right { padding: 60px 0 40px; } } @media (min-width: 1101px) { .header-05__right_wrapper, .header-19__right_wrapper, .header-20__right_wrapper, .header-56__right_wrapper { position: absolute; bottom: 10%; right: -3%; width: 60%; } } .header-06, .header-22, .header-57 { position: relative; z-index: 100; padding-bottom: 90px; } .header-06__container, .header-22__container, .header-57__container { position: relative; z-index: 50; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-top: 140px; } @media (max-width: 1366px) { .header-06__container, .header-22__container, .header-57__container { padding-top: 100px; } } @media (max-width: 700px) { .header-06__container, .header-22__container, .header-57__container { padding-top: 70px; } } .header-06__info, .header-22__info, .header-57__info { width: 50%; } @media (max-width: 1000px) { .header-06__info, .header-22__info, .header-57__info { width: 60%; } } @media (max-width: 760px) { .header-06__info, .header-22__info, .header-57__info { width: 100%; margin-bottom: 100px; text-align: center; } } .header-06__info_content, .header-22__info_content, .header-57__info_content { max-width: 550px; } @media (max-width: 760px) { .header-06__info_content, .header-22__info_content, .header-57__info_content { margin-left: auto; margin-right: auto; } } .header-06__text, .header-22__text, .header-57__text { max-width: 430px; } @media (max-width: 760px) { .header-06__text, .header-22__text, .header-57__text { margin-left: auto; margin-right: auto; } } .header-06__buttons_box, .header-22__buttons_box, .header-57__buttons_box { margin-top: 45px; } .header-06__visual, .header-22__visual, .header-57__visual { position: relative; width: 50%; text-align: right; } @media (max-width: 1000px) { .header-06__visual, .header-22__visual, .header-57__visual { width: 22%; } } @media (max-width: 760px) { .header-06__visual, .header-22__visual, .header-57__visual { width: 90%; margin: auto; } } @media (max-width: 500px) { .header-06__visual, .header-22__visual, .header-57__visual { width: 60%; } } .header-06__visual__wrapper, .header-22__visual__wrapper, .header-57__visual__wrapper { position: relative; } .header-06__mockup--shift, .header-22__mockup--shift, .header-57__mockup--shift { position: absolute; left: -25%; right: 0; bottom: 0; top: 10%; width: 100%; margin: auto; } @media (max-width: 760px) { .header-06__mockup--static, .header-22__mockup--static, .header-57__mockup--static { position: relative; left: 30px; } } @media (max-width: 1400px) { .header-06__mockup, .header-22__mockup, .header-57__mockup { display: flex; justify-content: center; flex-wrap: wrap; } .header-06__mockup .mockup, .header-22__mockup .mockup, .header-57__mockup .mockup { width: 250px; } } @media (max-width: 1366px) { .header-06__mockup .mockup, .header-22__mockup .mockup, .header-57__mockup .mockup { width: 200px; } } @media (max-width: 760px) { .header-06__buttons, .header-22__buttons, .header-57__buttons { justify-content: center; } .header-06__buttons .rich_download_app__item, .header-22__buttons .rich_download_app__item, .header-57__buttons .rich_download_app__item { margin-right: 8px; margin-left: 8px; } } .header-07, .header-23, .header-24, .header-25, .header-58 { position: relative; } .header-07__container, .header-23__container, .header-24__container, .header-25__container, .header-58__container { z-index: 50; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; /* padding-top: 120px; */ padding-bottom: 10px; } @media (max-width: 1020px) { .header-07__container, .header-23__container, .header-24__container, .header-25__container, .header-58__container { display: block; } } .header-07__left, .header-23__left, .header-24__left, .header-25__left, .header-58__left { position: relative; z-index: 20; width: 550px; max-width: 550px; padding-top: 70px; padding-bottom: 70px; } @media (max-width: 1020px) { .header-07__left, .header-23__left, .header-24__left, .header-25__left, .header-58__left { width: 100%; margin-left: auto; margin-right: auto; text-align: center; padding-top: 0px; padding-bottom: 0px; } } .header-25__left_content img:not(.producthunt) { max-width: 5em; padding: 20px 10px 0 0; float: left; } @media (max-width: 1020px) { .header-25__left_content img:not(.producthunt) { float: unset; } } .header-07__text, .header-23__text, .header-24__text, .header-25__text, .header-58__text { max-width: 80%; } @media (max-width: 1020px) { .header-07__text, .header-23__text, .header-24__text, .header-25__text, .header-58__text { margin-left: auto; margin-right: auto; } } .header-07__cta_box, .header-23__cta_box, .header-24__cta_box, .header-25__cta_box, .header-58__cta_box { margin-top: 45px; } .header-07__right, .header-23__right, .header-24__right, .header-25__right, .header-58__right { width: calc(100% - 550px); text-align: center; } @media (max-width: 1020px) { .header-07__right, .header-23__right, .header-24__right, .header-25__right, .header-58__right { margin-left: auto; margin-right: auto; width: 100%; max-width: 500px; } } .header-07__img, .header-23__img, .header-24__img, .header-25__img, .header-58__img { position: relative; z-index: 10; max-height: 500px; max-width: 100%; text-align: center; } @media (max-width: 600px) { .header-07__img, .header-23__img, .header-24__img, .header-25__img, .header-58__img { max-height: 300px; } } @media (min-width: 1100px) { .header-25__img { max-width: 90%; } } .header-08, .header-59 { position: relative; z-index: 100; } .header-08__container, .header-59__container { position: relative; z-index: 50; padding-top: 120px; } @media (max-width: 700px) { .header-08__container, .header-59__container { padding-top: 70px; } } @media (max-width: 1250px) { .header-08__left, .header-59__left { margin-bottom: 60px; text-align: center; } } .header-08__left_content, .header-59__left_content { padding: 150px 0 330px; max-width: 490px; } @media (max-width: 1500px) { .header-08__left_content, .header-59__left_content { padding-top: 70px; padding-bottom: 210px; } } @media (max-width: 1250px) { .header-08__left_content, .header-59__left_content { padding: 0; margin-left: auto; margin-right: auto; } } .header-08__text, .header-59__text { max-width: 450px; } @media (max-width: 1250px) { .header-08__text, .header-59__text { margin-left: auto; margin-right: auto; } } .header-08__cta_box, .header-59__cta_box { max-width: 480px; margin-top: 45px; } .header-08__right, .header-59__right { position: absolute; overflow: hidden; right: 0; top: 0; height: 100%; width: 100%; } @media (max-width: 1250px) { .header-08__right, .header-59__right { overflow: visible; position: static; } } .header-08__right_wrapper, .header-59__right_wrapper { position: absolute; top: 50%; transform: translateY(-50%); right: -10%; width: 60%; } @media (max-width: 1250px) { .header-08__right_wrapper, .header-59__right_wrapper { position: relative; transform: none; right: auto; left: auto; width: 100%; } } .header-08__small_mockup, .header-59__small_mockup { position: absolute; z-index: 10; width: 18%; left: 5%; bottom: -1%; } .header-09 { position: relative; z-index: 100; } .header-09__container { padding-top: 140px; text-align: center; } @media (max-width: 700px) { .header-09__container { padding-top: 70px; } } .header-09__main { margin-bottom: 70px; } @media (max-width: 400px) { .header-09__main { margin-bottom: 40px; } } .header-09__main_content { max-width: 550px; margin: auto; } .header-09__text { max-width: 450px; margin: auto; } .header-09__action_box { max-width: 480px; margin: 45px auto auto; } .header-09__img_wrapper { position: relative; } .header-09__small_mockup { position: absolute; z-index: 10; width: 18%; left: 5%; bottom: -1.3%; } @media (max-width: 500px) { .header-26 .buttons-set__item { width: auto; margin-left: 3px; margin-right: 3px; } } .header-26__text { padding-top: 100px; max-width: 450px; margin-left: auto; margin-right: auto; text-align: center; color: rgba(48, 48, 48, 0.8); } .header-26__cta_box { margin-top: 30px; } .header-26__mockups { position: relative; overflow: hidden; height: 420px; margin-top: 50px; } @media (max-width: 700px) { .header-26__mockups { height: 300px; } } @media (max-width: 400px) { .header-26__mockups { height: 250px; } } @media (max-width: 360px) { .header-26__mockups { height: 200px; } } .header-26__mockup { position: absolute; width: 300px; text-align: center; } .header-26__mockup--center { z-index: 10; top: 15px; left: 0; right: 0; margin: auto; } .header-26__mockup--left { left: 0; right: 0; margin: auto; top: 10%; transform: scale(0.9) translateX(-60%); } .header-26__mockup--right { left: 0; right: 0; margin: auto; top: 10%; transform: scale(0.9) translateX(60%); } @media (max-width: 700px) { .header-26__mockup { width: 40%; } } .header-27, .header-34 { position: relative; } .header-27 { margin-bottom: 110px; background-size: cover; background-position: center; background-repeat: no-repeat; } .header-34 { padding-bottom: 70px; background-color: #F6F6F6; } .header-27__overlay, .header-34__overlay { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-color: rgba(0, 0, 0, 0.75); } .header-27__container, .header-34__container { position: relative; z-index: 10; padding-top: 140px; text-align: center; } @media (max-width: 840px) { .header-27__container, .header-34__container { padding-bottom: 60px; } } .header-27__buttons { margin-top: 40px; margin-bottom: 50px; } @media (max-width: 840px) { .header-27__buttons { margin-bottom: 70px; } } .header-34__buttons { margin-top: 40px; margin-bottom: 70px; } .header-27__links, .header-34__links { padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; } @media (max-width: 840px) { .header-27__links, .header-34__links { justify-content: center; } } .header-27__item { transform: translateY(40px); } .header-27__item, .header-34__item { position: relative; width: 250px; padding: 10px 25px 40px 15px; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); border-radius: 10px; background-color: white; text-align: left; } @media (max-width: 840px) { .header-27__item, .header-34__item { transform: none; margin-left: 10px; margin-right: 10px; margin-bottom: 30px; } .header-27__item:last-child, .header-34__item:last-child { margin-bottom: 0; } } .header-27__title, .header-34__title { margin-bottom: 7px; font-size: 20px; } .header-27__info, .header-34__info { opacity: 0.6; margin-bottom: 5px; font-size: 14px; } .header-27__emoji, .header-34__emoji { position: absolute; left: 0; top: 0; right: 0; margin: auto; width: 30px; transform: translateY(-50%); } .header-27__link, .header-34__link { position: absolute; left: 15px; bottom: 15px; } .header-28 { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; } .header-28__overlay { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-color: rgba(0, 0, 0, 0.75); } .header-28__container { position: relative; z-index: 10; padding-top: 100px; padding-bottom: 100px; } @media (max-width: 600px) { .header-28__container { padding-bottom: 50px; } } .header-28__buttons { padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 70px; } @media (max-width: 600px) { .header-28__buttons { margin-top: 40px; } } .header-28__item { width: 40%; max-width: 400px; } @media (max-width: 600px) { .header-28__item { width: 100%; margin-bottom: 70px; } .header-28__item:last-child { margin-bottom: 0; } } .header-28__text { opacity: 0.8; margin-bottom: 30px; line-height: 1.4; } .header-29 { position: relative; padding-bottom: 100px; background-size: cover; background-position: center; background-repeat: no-repeat; } @media (max-width: 770px) { .header-29 { padding-bottom: 70px; } } .header-29__overlay { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-color: rgba(0, 0, 0, 0.75); } .header-29__container { position: relative; z-index: 10; padding-top: 140px; text-align: center; } @media (max-width: 770px) { .header-29__container { padding-top: 100px; } } .header-29__text_box { max-width: 450px; margin-left: auto; margin-right: auto; } .header-29__buttons { margin-top: 50px; } .header-30, .header-31, .header-32, .header-33 { position: relative; padding-bottom: 100px; } @media (max-width: 770px) { .header-30, .header-31, .header-32, .header-33 { padding-bottom: 70px; } } .header-30 .score__stars, .header-32 .score__stars, .header-33 .score__stars { background-color: transparent; margin-left: auto; margin-right: auto; margin-bottom: 10px; } .header-30 .score__star, .header-32 .score__star, .header-33 .score__star { width: 18px; } .header-30 .score__text, .header-32 .score__text, .header-33 .score__text { line-height: 1.4; } .header-30 .score__text a, .header-32 .score__text a, .header-33 .score__text a { opacity: 0.8; transition: opacity 0.25s ease; } .header-30 .score__text a:hover, .header-32 .score__text a:hover, .header-33 .score__text a:hover { opacity: 1; } .header-31 .rich_download_app { justify-content: center; } .header-30__container, .header-31__container, .header-32__container, .header-33__container { position: relative; z-index: 10; padding-top: 140px; text-align: center; } @media (max-width: 770px) { .header-30__container, .header-31__container, .header-32__container, .header-33__container { padding-top: 100px; } } .header-30__text_box, .header-31__text_box, .header-32__text_box, .header-33__text_box { max-width: 450px; margin-left: auto; margin-right: auto; } .header-30__buttons, .header-31__buttons, .header-32__buttons, .header-33__buttons { margin-top: 50px; } .header-35, .header-36, .header-37, .header-38 { position: relative; padding-bottom: 70px; background-size: cover; background-position: center bottom; background-repeat: no-repeat; background-color: #303030; } .header-35__overlay, .header-36__overlay, .header-37__overlay, .header-38__overlay { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-color: rgba(0, 0, 0, 0.75); } .header-35__box, .header-36__box, .header-37__box, .header-38__box { position: relative; z-index: 10; } .header-35__wrapper, .header-36__wrapper, .header-37__wrapper, .header-38__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-top: 170px; } @media (max-width: 900px) { .header-35__wrapper, .header-36__wrapper, .header-37__wrapper, .header-38__wrapper { padding-top: 100px; flex-direction: column; } } .header-35__text_box, .header-36__text_box, .header-37__text_box, .header-38__text_box { width: 50%; } @media (max-width: 900px) { .header-35__text_box, .header-36__text_box, .header-37__text_box, .header-38__text_box { width: 100%; margin-bottom: 70px; text-align: center; } } .header-35__video_box, .header-36__video_box, .header-37__video_box, .header-38__video_box { overflow: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); width: 40%; border-radius: 10px; } .header-35__video_box iframe, .header-36__video_box iframe, .header-37__video_box iframe, .header-38__video_box iframe { position: relative; z-index: 10; height: 100%; width: 100%; } @media (max-width: 900px) { .header-35__video_box, .header-36__video_box, .header-37__video_box, .header-38__video_box { width: 100%; max-width: 450px; } } .header-35__video, .header-36__video, .header-37__video, .header-38__video { position: relative; height: 210px; background-color: #303030; } .header-35__video .spinner, .header-36__video .spinner, .header-37__video .spinner, .header-38__video .spinner { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } .header-35__heading, .header-36__heading, .header-37__heading, .header-38__heading { margin-bottom: 30px; } .header-35__heading .emoji, .header-36__heading .emoji, .header-37__heading .emoji, .header-38__heading .emoji { margin-left: 0.3em; } @media (max-width: 500px) { .header-35__buttons, .header-36__buttons, .header-37__buttons, .header-38__buttons { text-align: center; } .header-35__buttons .buttons-set__item, .header-36__buttons .buttons-set__item, .header-37__buttons .buttons-set__item, .header-38__buttons .buttons-set__item { display: block; margin: 0 0 15px 0; } .header-35__buttons .buttons-set__item:last-child, .header-36__buttons .buttons-set__item:last-child, .header-37__buttons .buttons-set__item:last-child, .header-38__buttons .buttons-set__item:last-child { margin-bottom: 0; } } @media (max-width: 500px) { .header-36__buttons .buttons-set__item { vertical-align: top; display: inline-block; width: auto; margin-left: 3px; margin-right: 3px; } } .header-35__text, .header-36__text, .header-37__text, .header-38__text { margin-bottom: 40px; max-width: 420px; } @media (max-width: 900px) { .header-35__text, .header-36__text, .header-37__text, .header-38__text { margin-left: auto; margin-right: auto; } } .header-35__features, .header-36__features, .header-37__features, .header-38__features { padding: 0; margin: 0; list-style: none; position: relative; z-index: 50; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 100px; padding-top: 50px; border-top: 1px solid rgba(246, 246, 246, 0.2); } @media (max-width: 768px) { .header-35__features, .header-36__features, .header-37__features, .header-38__features { display: block; } } .header-35__feature, .header-36__feature, .header-37__feature, .header-38__feature { width: 30%; padding-right: 15px; } @media (max-width: 768px) { .header-35__feature, .header-36__feature, .header-37__feature, .header-38__feature { width: 100%; margin-bottom: 40px; text-align: center; } .header-35__feature:last-child, .header-36__feature:last-child, .header-37__feature:last-child, .header-38__feature:last-child { margin-bottom: 0; } } .header-35__feature_box, .header-36__feature_box, .header-37__feature_box, .header-38__feature_box { display: inline-block; opacity: 0.8; max-width: 300px; } .header-39, .header-40, .header-41, .header-42 { position: relative; padding-bottom: 100px; } @media (max-width: 770px) { .header-39, .header-40, .header-41, .header-42 { padding-bottom: 70px; } } @media (max-width: 500px) { .header-40 .buttons-set__item { width: auto; margin-left: 3px; margin-right: 3px; } } .header-39__container, .header-40__container, .header-41__container, .header-42__container { position: relative; z-index: 10; padding-top: 140px; text-align: center; } @media (max-width: 770px) { .header-39__container, .header-40__container, .header-41__container, .header-42__container { padding-top: 100px; } } .header-39__text_box, .header-40__text_box, .header-41__text_box, .header-42__text_box { max-width: 450px; margin-left: auto; margin-right: auto; } .header-39__buttons, .header-40__buttons, .header-41__buttons, .header-42__buttons { margin-top: 50px; } .header-39__video, .header-40__video, .header-41__video, .header-42__video { overflow: hidden; position: relative; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); margin-top: 50px; max-width: 800px; margin-left: auto; margin-right: auto; height: 500px; border-radius: 10px; background-color: #303030; } .header-39__video iframe, .header-40__video iframe, .header-41__video iframe, .header-42__video iframe { position: relative; z-index: 10; width: 100%; height: 100%; } .header-39__video .spinner, .header-40__video .spinner, .header-41__video .spinner, .header-42__video .spinner { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } @media (max-width: 800px) { .header-39__video, .header-40__video, .header-41__video, .header-42__video { height: 300px; } } @media (max-width: 400px) { .header-39__video, .header-40__video, .header-41__video, .header-42__video { height: 200px; } } .header-43 { padding-bottom: 100px; background-color: #23273E; } @media (max-width: 500px) { .header-43 { padding-bottom: 50px; } } .header-43__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-top: 120px; } @media (max-width: 500px) { .header-43__wrapper { padding-top: 100px; } } .header-43__text_box { max-width: 550px; } .header-43__img_box { width: calc(100% - 550px); padding-left: 20px; padding-right: 20px; text-align: center; } @media (max-width: 700px) { .header-43__img_box { display: none; } } .header-43__img { max-width: 90px; width: 100%; } .header-44 { padding-bottom: 100px; background-color: #00396B; } @media (max-width: 500px) { .header-44 { padding-bottom: 50px; } } .header-44__wrapper { padding-top: 120px; } @media (max-width: 500px) { .header-44__wrapper { padding-top: 100px; } } .header-44__text_box { max-width: 500px; } .header-44__img { max-width: 90px; width: 100%; } .header-44__buttons_box { margin-top: 40px; } .header-45, .header-46, .header-47, .header-48 { padding-bottom: 100px; } @media (max-width: 500px) { .header-46 .buttons-set__item { width: auto; margin-left: 3px; margin-right: 3px; } } .header-45__box, .header-46__box, .header-47__box, .header-48__box { text-align: center; } .header-45__container, .header-46__container, .header-47__container, .header-48__container { padding-top: 200px; } @media (max-width: 1366px) { .header-45__container, .header-46__container, .header-47__container, .header-48__container { padding-top: 120px; } } @media (max-width: 900px) { .header-45__container, .header-46__container, .header-47__container, .header-48__container { padding-top: 100px; } } .header-45__heading, .header-46__heading, .header-47__heading, .header-48__heading { max-width: 580px; margin-left: auto; margin-right: auto; } .header-45__heading .emoji, .header-46__heading .emoji, .header-47__heading .emoji, .header-48__heading .emoji { margin-left: 0.3em; } .header-45__text, .header-46__text, .header-47__text, .header-48__text { margin: auto auto 60px auto; max-width: 480px; } .header-45__logos, .header-46__logos, .header-47__logos, .header-48__logos { margin-top: 100px; } .header-45__logos .logos__img, .header-46__logos .logos__img, .header-47__logos .logos__img, .header-48__logos .logos__img { opacity: 0.25; } @media (max-width: 1366px) { .header-45__logos, .header-46__logos, .header-47__logos, .header-48__logos { margin-top: 70px; } } @media (max-width: 900px) { .header-45__logos .logos__list, .header-46__logos .logos__list, .header-47__logos .logos__list, .header-48__logos .logos__list { justify-content: center; } .header-45__logos .logos__item, .header-46__logos .logos__item, .header-47__logos .logos__item, .header-48__logos .logos__item { width: 35%; margin-bottom: 60px; } } @media (max-width: 500px) { .header-45__logos, .header-46__logos, .header-47__logos, .header-48__logos { margin-top: 30px; } .header-45__logos .logos__item, .header-46__logos .logos__item, .header-47__logos .logos__item, .header-48__logos .logos__item { margin-bottom: 30px; } .header-45__logos .logos__img, .header-46__logos .logos__img, .header-47__logos .logos__img, .header-48__logos .logos__img { max-height: 16px; } } .header-49 { background-color: #00396B; margin-bottom: 200px; } @media (max-width: 900px) { .header-49 { padding-bottom: 50px; margin-bottom: 0; } } .header-49__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-top: 120px; } @media (max-width: 500px) { .header-49__wrapper { padding-top: 100px; } } .header-49__text_box { max-width: 550px; } .header-49__buttons_box { margin-top: 30px; } .header-49__img_box { width: calc(100% - 550px); padding-left: 20px; padding-right: 20px; text-align: center; } @media (max-width: 700px) { .header-49__img_box { display: none; } } .header-49__img { max-width: 120px; width: 100%; } @media (max-width: 800px) { .header-49__img { display: none; } } .header-49__features_list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 30px 30px 30px; transform: translateY(140px); margin-top: -40px; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); border-radius: 10px; background-color: white; } @media (max-width: 900px) { .header-49__features_list { justify-content: center; transform: none; padding: 0; margin-top: 80px; box-shadow: none; background-color: transparent; } } .header-49__feature { position: relative; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; padding-right: 25px; width: 33%; } @media (max-width: 900px) { .header-49__feature { width: 100%; max-width: 300px; margin-bottom: 30px; margin-left: 15px; margin-right: 15px; padding: 20px 20px 20px 20px; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); border-radius: 10px; background-color: white; } .header-49__feature:last-child { margin-right: 0; margin-bottom: 0; } } @media (max-width: 400px) { .header-49__feature { flex-direction: column; margin-right: 0; margin-left: 0; } } .header-49__icon { margin-right: 20px; width: 40px; } @media (max-width: 400px) { .header-49__icon { margin-bottom: 10px; } } .header-49__feature_title { margin-top: 0; } .header-49__text { opacity: 0.8; margin-bottom: 10px; line-height: 1.4; } .header-50, .header-51, .header-52, .header-53 { position: relative; padding-bottom: 100px; } .header-50 .buttons-set__item, .header-51 .buttons-set__item, .header-52 .buttons-set__item, .header-53 .buttons-set__item { padding-bottom: 0; } @media (max-width: 400px) { .header-50, .header-51, .header-52, .header-53 { padding-bottom: 70px; } } .header-50__box, .header-51__box, .header-52__box, .header-53__box { position: relative; z-index: 10; } .header-50__wrapper, .header-51__wrapper, .header-52__wrapper, .header-53__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-top: 170px; } @media (max-width: 900px) { .header-50__wrapper, .header-51__wrapper, .header-52__wrapper, .header-53__wrapper { padding-top: 100px; flex-direction: column; } } .header-50__text_box, .header-51__text_box, .header-52__text_box, .header-53__text_box { width: 50%; } @media (max-width: 900px) { .header-50__text_box, .header-51__text_box, .header-52__text_box, .header-53__text_box { width: 100%; margin-bottom: 70px; text-align: center; } } .header-50__video_box, .header-51__video_box, .header-52__video_box, .header-53__video_box { overflow: hidden; width: 40%; border-radius: 10px; } @media (max-width: 900px) { .header-50__video_box, .header-51__video_box, .header-52__video_box, .header-53__video_box { width: 100%; max-width: 450px; } } .header-50__video, .header-51__video, .header-52__video, .header-53__video { position: relative; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); height: 210px; background-color: #303030; } .header-50__video iframe, .header-51__video iframe, .header-52__video iframe, .header-53__video iframe { position: relative; z-index: 10; width: 100%; height: 100%; } .header-50__video .spinner, .header-51__video .spinner, .header-52__video .spinner, .header-53__video .spinner { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } .header-50__heading, .header-51__heading, .header-52__heading, .header-53__heading { margin-bottom: 30px; } .header-50__heading .emoji, .header-51__heading .emoji, .header-52__heading .emoji, .header-53__heading .emoji { margin-left: 0.3em; } @media (max-width: 500px) { .header-50__buttons, .header-51__buttons, .header-52__buttons, .header-53__buttons { text-align: center; } .header-50__buttons .buttons-set__item, .header-51__buttons .buttons-set__item, .header-52__buttons .buttons-set__item, .header-53__buttons .buttons-set__item { display: block; margin: 0 0 15px 0; } .header-50__buttons .buttons-set__item:last-child, .header-51__buttons .buttons-set__item:last-child, .header-52__buttons .buttons-set__item:last-child, .header-53__buttons .buttons-set__item:last-child { margin-bottom: 0; } } @media (max-width: 500px) { .header-51__buttons .buttons-set__item { vertical-align: top; display: inline-block; width: auto; margin-left: 3px; margin-right: 3px; } } .header-50__text, .header-51__text, .header-52__text, .header-53__text { margin-bottom: 40px; max-width: 420px; } @media (max-width: 900px) { .header-50__text, .header-51__text, .header-52__text, .header-53__text { margin-left: auto; margin-right: auto; } } .photos-01 { padding-top: 70px; padding-bottom: 70px; } .photos-01__title_box { margin-bottom: 100px; text-align: center; } .photos-01__images_row { display: flex; justify-content: center; flex-wrap: wrap; } .photos-01__person { width: 25%; min-width: 140px; font-size: 0; } .photos-01__image { padding-bottom: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; transition: -webkit-filter 0.20s ease, filter 0.20s ease; } .photos-01__image:hover { -webkit-filter: contrast(1.4); filter: contrast(1.4); } .photos-02 { padding-top: 70px; padding-bottom: 70px; } .photos-02__title_box { margin-bottom: 40px; text-align: center; } .photos-02__img_box { text-align: center; } .photos-02__img { max-width: 100%; } .photos-03 { /* padding-top: 70px; */ padding-bottom: 70px; } .photos-03__title_box { margin-bottom: 40px; text-align: center; } .photos-03__img_box { text-align: center; } .photos-03__img { max-width: 100%; } .photos-04 { padding: 70px 0 70px; } .photos-04__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; flex-direction: row-reverse; } .photos-04__main { position: relative; z-index: 20; padding: 40px 40px 40px 40px; width: 50%; } @media (max-width: 700px) { .photos-04__main { width: 100%; } } .photos-04__main_content { max-width: 550px; } .photos-04__heading { max-width: 400px; } .photos-04__text { max-width: 450px; } .photos-04__buttons_box { margin-top: 45px; } .photos-04__visual { width: 50%; } @media (max-width: 700px) { .photos-04__visual { width: 100%; margin-bottom: 60px; } } .photos-04__img_box { font-size: 0; } .photos-04__img { max-width: 100%; max-height: 100%; font-size: 14px; } .photos-05 { padding: 70px 0 70px; } .photos-05__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .photos-05__main { position: relative; z-index: 20; padding: 40px 40px 40px 40px; width: 50%; } @media (max-width: 700px) { .photos-05__main { width: 100%; } } .photos-05__main_content { max-width: 550px; } .photos-05__heading { max-width: 400px; } .photos-05__text { max-width: 450px; } .photos-05__buttons_box { margin-top: 45px; } .photos-05__visual { width: 50%; } @media (max-width: 700px) { .photos-05__visual { width: 100%; margin-bottom: 60px; } } .photos-05__img_box { font-size: 0; } .photos-05__img { max-width: 100%; max-height: 100%; font-size: 14px; } .roadmap-01 { padding-top: 70px; padding-bottom: 70px; } .roadmap-01__title_box { margin-bottom: 100px; text-align: center; } .roadmap-01__container { overflow: hidden; position: relative; } .roadmap-01__wrapper { padding-right: 40px; } .body--desktop .roadmap-01__wrapper { overflow: hidden; } .body--mobile .roadmap-01__wrapper { overflow: auto; } .roadmap-01__box { width: 10000px; padding-left: 20%; padding-bottom: 40px; } .roadmap-01__box:after { content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both; } @media (max-width: 1024px) { .roadmap-01__box { padding-left: 50px; } } .roadmap-01__link { margin-top: 70px; padding-left: 15px; padding-right: 15px; text-align: center; } .roadmap-01__column { position: relative; float: left; width: 330px; padding: 20px 15px 40px; margin-right: 30px; border-radius: 4px; background-color: #23273E; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.3); } .roadmap-01__top { margin-bottom: 20px; } .roadmap-01__category { margin: 0 0 0.2em 0; color: white; } .roadmap-01__date { opacity: 0.6; color: white; font-size: 14px; text-transform: uppercase; } .roadmap-01__items_list { padding: 0; margin: 0; list-style: none; } .roadmap-01__item { padding: 12px 14px 12px; margin-bottom: 15px; background-color: white; border-radius: 4px; } .roadmap-01__item:last-child { margin-bottom: 0; } .roadmap-01__item_title { font-weight: 700; color: #00396B; line-height: 1.4; } .roadmap-01__item_title .emoji { margin-left: 0.3em; } .roadmap-01__item_text { margin-top: 10px; line-height: 1.4; } .roadmap-01__shadow { position: absolute; top: 0; bottom: 0; width: 50px; z-index: 10; } .roadmap-01__shadow--left { left: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.6) 10%, rgba(255, 255, 255, 0) 100%); } @media (max-width: 1024px) { .roadmap-01__shadow--left { left: -20px; } } .roadmap-01__shadow--right { right: 0; background-image: linear-gradient(to left, rgba(255, 255, 255, 0.6) 10%, rgba(255, 255, 255, 0) 100%); } @media (max-width: 1024px) { .roadmap-01__shadow--right { right: -20px; } } .roadmap-02 { padding-top: 70px; padding-bottom: 70px; } .roadmap-02__title_box { margin-bottom: 50px; text-align: center; } .roadmap-02__timeline { padding: 0; margin: 0; list-style: none; position: relative; margin-bottom: 70px; } .roadmap-02__timeline:before { content: ""; position: absolute; left: 59px; width: 1px; top: 0; bottom: 0; background-color: #D8DDE6; } .roadmap-02__item { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; } .roadmap-02__year { margin-top: 0; margin-bottom: 0; margin-right: 55px; font-size: 14px; font-weight: 400; } .roadmap-02__info { padding: 0; margin: 0; list-style: none; } .roadmap-02__info_item { position: relative; margin-bottom: 30px; } .roadmap-02__info_item:before { content: ""; position: absolute; width: 7px; height: 7px; top: 6px; left: -33px; border-radius: 50%; background-color: #D8DDE6; border: 2px solid white; } .roadmap-02__content { opacity: 0.8; margin-bottom: 5px; line-height: 1.4; } .roadmap-02__content a:hover { color: #041ddf; } .roadmap-02__date { opacity: 0.4; font-size: 14px; } .roadmap-02__link { text-align: center; } .team-01 { position: relative; padding-top: 70px; padding-bottom: 70px; } .team-01__title_box { margin-bottom: 50px; text-align: center; } .team-01__decoration { position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 100%; max-width: 800px; z-index: -1; } .team-01__images_row { display: flex; justify-content: center; flex-wrap: wrap; } .team-01__person { width: 25%; padding: 40px; min-width: 230px; font-size: 0; } .team-01__image { padding-bottom: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #eee; border-radius: 50%; box-shadow: 0 7px 25px 0 rgba(37, 44, 97, 0.1); transition: -webkit-filter 0.20s ease, filter 0.20s ease; } .team-01__image:hover { -webkit-filter: contrast(1.4); filter: contrast(1.4); } .team-02 { position: relative; padding-top: 70px; padding-bottom: 40px; } .team-02__title_box { margin-bottom: 50px; text-align: center; } .team-02__decoration { position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 100%; max-width: 800px; z-index: -1; } .team-02__list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; } .team-02__person { width: 260px; padding: 45px 20px 30px; margin: 0 20px 20px; background-color: white; box-shadow: 0 5px 15px 0 rgba(37, 44, 97, 0.15); border-radius: 10px; text-align: center; } .team-02__person_img { display: inline-block; width: 100px; height: 100px; margin-bottom: 15px; border-radius: 50%; box-shadow: 0 7px 25px 0 rgba(37, 44, 97, 0.1); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #eee; } .team-02__person_name { margin-bottom: 15px; letter-spacing: 0.02em; font-size: 12px; font-weight: 700; text-transform: uppercase; } .team-02__person_tag { margin-bottom: 15px; } .team-02__person_about { margin-bottom: 20px; } .team-02__person_social .social-buttons__link { opacity: 0.2; } .team-02__person_social .social-buttons__link:hover { opacity: 0.5; transform: translateY(-2px); } .team-02__link { margin-top: 80px; padding-right: 15px; padding-left: 15px; text-align: center; } .team-03 { position: relative; padding-top: 70px; padding-bottom: 70px; } .team-03__title_box { margin-bottom: 50px; text-align: center; } .team-03__decoration { position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 100%; max-width: 800px; z-index: -1; } .team-03__list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .team-03__person { width: 270px; height: 100px; padding: 15px; margin: 0 10px 20px 10px; background-color: white; box-shadow: 0 5px 15px 0 rgba(37, 44, 97, 0.15); border-radius: 10px; } .team-03__person--accent { padding: 0; background-color: #F90473; color: white; box-shadow: none; transition: background-color 0.25s ease; } .team-03__person--accent:hover { background-color: #ea046c; } .team-03__person:hover .team-03__person_mention { opacity: 0.7; } .team-03__person_box { display: flex; justify-content: space-between; flex-direction: column; height: 100%; } .team-03__person_top { position: relative; } .team-03__person_img { position: absolute; right: 0; top: 0; width: 30px; height: 30px; margin-bottom: 15px; border-radius: 50%; box-shadow: 0 7px 25px 0 rgba(37, 44, 97, 0.1); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #eee; } .team-03__person_name { margin-bottom: 2px; font-size: 14px; color: #00396B; } .team-03__person_mention { opacity: 0.2; font-size: 14px; color: #303030; text-decoration: none; transition: opacity 0.25s ease; } .team-03__person_title { color: #54698D; } .team-03__link { display: block; position: relative; height: 100%; text-decoration: none; color: white; text-align: center; } .team-03__link:hover { color: white; } .team-03__link_content { position: absolute; left: 0; right: 0; bottom: 0; top: 50%; transform: translateY(-50%); margin: auto; } .team-03__link_text { margin-top: 5px; } .team-04 { padding: 70px 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .team-04 .heading, .team-04 .text--04__big_text { margin-top: 0; margin-bottom: 40px; text-align: center; } .team-04 p { margin: 0; text-align: center; } .team-04 .container--small { margin-bottom: 50px; } .team-04__list { padding: 0; margin: 0; list-style: none; width: 100%; margin-bottom: 80px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } @media (max-width: 900px) { .team-04__list { margin-bottom: 40px; justify-content: center; background-color: transparent; border-radius: unset; box-shadow: none; } } .team-04__person { width: calc(100%/5); padding: 45px 0; box-sizing: border-box; border-right: 1px solid rgba(151, 151, 151, 0.2); background-color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; } .team-04__person:nth-child(1) { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .team-04__person:last-child { border-right: none; border-bottom-right-radius: 10px; border-top-right-radius: 10px; } .team-04__person:hover .team-04__person_img { transform: translateY(-4px); } @media (max-width: 900px) { .team-04__person { width: 32%; padding: 30px 0; margin-right: 2%; margin-bottom: 10px; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2); background-color: white; } .team-04__person:nth-child(3n) { margin-right: 0; } } @media (max-width: 600px) { .team-04__person { width: 48%; padding: 30px 0; margin-bottom: 20px; margin-right: 2%; } .team-04__person:nth-child(2n) { margin-right: 0; } .team-04__person:nth-child(3n) { margin-right: 2%; } } @media (max-width: 450px) { .team-04__person { width: 60%; max-width: 250px; margin-right: 0; } .team-04__person:nth-child(2n) { margin-right: 0; } .team-04__person:nth-child(3n) { margin-right: 0; } } .team-04__person_img { width: 100px; height: 100px; margin: 0 auto 15px; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #eee; box-shadow: 0 7px 25px 0 rgba(37, 44, 97, 0.1); transition: all 0.4s ease; } .team-04__person_name { margin-bottom: 25px; font-size: 12px; line-height: 1.4; text-align: center; text-transform: uppercase; } .team-04__person_social .social-buttons__link { opacity: 0.2; } .team-04__person_social .social-buttons__link:hover { opacity: 0.5; transform: translateY(-2px); } .team-04__button { text-align: center; } .team-04__button .button { text-transform: uppercase; color: white; border-color: white; } .team-04__button .button:hover { background-color: white; color: #303030; } .team-05 { padding: 70px 0; background-color: #F6F6F6; } .team-05__list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; } .team-05__person { width: 200px; padding: 25px; display: flex; align-items: center; flex-direction: column; text-align: center; box-sizing: border-box; } .team-05__person:hover .team-05__person_img { -webkit-filter: contrast(1.4); filter: contrast(1.4); } @media (max-width: 430px) { .team-05__person { width: 100%; max-width: 200px; } } .team-05__person_img { width: 100px; height: 100px; margin-bottom: 10px; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #eee; transition: all 0.2s ease; } .team-05__person_name { margin-bottom: 5px; line-height: 1.4; color: #23273E; } .team-05__person_title { font-size: 12px; line-height: 1.4; color: #303030; opacity: 0.6; } .team-05__person--accent { padding-top: 25px; align-self: center; background-color: white; border-radius: 10px; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); position: relative; } @media (max-width: 430px) { .team-05__person--accent { width: 100%; max-width: 200px; } } .team-05__person--accent .team-05__emoji_box { width: 30px; height: 30px; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); } .team-05__person--accent .team-05__emoji_box .emoji { max-width: 30px; max-height: 30px; } .team-05__person--accent .team-05__content { margin-top: 0; margin-bottom: 15px; font-size: 16px; font-weight: 400; line-height: 1.4; opacity: 0.8; } .team-05__person--accent .team-05__button { margin-top: auto; } .team-05__person--accent .team-05__button .button { background-color: #23273E; text-transform: uppercase; color: #eee; } .slider-01 { padding-top: 70px; padding-bottom: 100px; } .slider-01 .slick-list { border-radius: 10px; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); } .slider-01 .slider__arrow--prev { transform: translateY(-50%) translateX(-130%); } .slider-01 .slider__arrow--next { transform: translateY(-50%) translateX(130%); } .slider-01__title_box { text-align: center; margin-bottom: 70px; } .slider-01__container { text-align: center; } .slider-02 { padding-top: 70px; padding-bottom: 100px; } .slider-02 .slick-track { padding: 15px 0 35px; } .slider-02 .slider__arrow--prev { transform: translateY(-50%) translateX(-130%); } .slider-02 .slider__arrow--next { transform: translateY(-50%) translateX(130%); } .slider-02__title_box { text-align: center; margin-bottom: 70px; } @media (max-width: 500px) { .slider-02__title_box { margin-bottom: 30px; } } .slider-02__container { text-align: center; } .slider-02__item_box { padding: 0 20px; } @media (max-width: 1024px) { .slider-02__item_box { padding-left: 10px; padding-right: 10px; } } .slider-02__img { position: relative; z-index: 10; max-height: 500px; max-width: 70vw; margin-left: auto; margin-right: auto; border-radius: 10px; transform: scale(0.9); opacity: 0.65; box-shadow: 0 7px 25px 0 rgba(37, 44, 97, 0.1); cursor: pointer; transition: box-shadow 0.5s ease, transform 0.5s ease, opacity 0.5s ease; } .slider-02__img:hover { box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); } .slick-current .slider-02__img { cursor: default; opacity: 1; transform: none; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); } .slick-current .slider-02__img:hover { box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); } @media (max-width: 1024px) { .slider-02__img { max-height: 400px; } } @media (max-width: 1024px) { .slider-02__img { max-height: 330px; } } @media (max-width: 750px) { .slider-02__img { max-height: initial; width: 90vw; max-width: 100vw; } } .slider-02__item_info_box { position: relative; z-index: 1; width: 50%; min-width: 300px; max-width: 500px; margin-left: auto; margin-right: auto; text-align: left; transition: transform 0.5s 0.2s ease, opacity 0.5s 0.2s ease; transform: translateY(-10%); opacity: 0; } .slick-current .slider-02__item_info_box { opacity: 1; transform: none; } @media (max-width: 400px) { .slider-02__item_info_box { width: calc(100vw - 50px); } } .slider-02__item_info { position: relative; z-index: 10; padding: 10px 30px 30px; border: 2px solid #D8DDE6; border-top: none; border-radius: 0 0 10px 10px; background-color: white; } .slider-02__item_text { line-height: 1.4; opacity: 0.7; } .slider-02__item_badges { display: flex; justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; flex-direction: column; position: absolute; left: 0; top: 20px; transform: translateX(-100%); } @media (max-width: 600px) { .slider-02__item_badges { display: none; } } .slider-02__item_badge { display: block; padding: 3px 10px 3px 20px; margin-bottom: 10px; border-radius: 999px 0 0 999px; border-width: 2px; border-style: solid; border-right: none; font-weight: 700; text-transform: uppercase; font-size: 10px; transition: transform 0.7s ease, opacity 0.7s ease; transform: translateX(10px); opacity: 0; } .slider-02__item_badge--color-ocean { border-color: #23273E; color: #23273E; } .slider-02__item_badge--color-acid { border-color: #4ADDB4; color: #4ADDB4; } .slider-02__item_badge--color-magenta { border-color: #F90473; color: #F90473; } .slider-02__item_badge--color-orange { border-color: #FFB75D; color: #FFB75D; } .slider-02__item_badge--color-black { border-color: #303030; color: #303030; } .slider-02__item_badge--color-midnight { border-color: #00396B; color: #00396B; } .slick-current .slider-02__item_badge { opacity: 1; transform: none; } .slider-02__item_badge:nth-child(1) { transition-delay: 500ms; } .slider-02__item_badge:nth-child(2) { transition-delay: 570ms; } .slider-02__item_badge:nth-child(3) { transition-delay: 640ms; } .slider-02__item_badge:nth-child(4) { transition-delay: 710ms; } .slider-02__item_badge:nth-child(5) { transition-delay: 780ms; } .slider-02__item_badge:nth-child(6) { transition-delay: 850ms; } .slider-02__item_badge:nth-child(7) { transition-delay: 920ms; } .slider-02__item_badge:nth-child(8) { transition-delay: 990ms; } .slider-02__item_badge:nth-child(9) { transition-delay: 1060ms; } .slider-02__item_badge:nth-child(10) { transition-delay: 1130ms; } .slider-03 { padding-top: 70px; padding-bottom: 200px; } .slider-03 .slick-list { padding: 0 !important; } .slider-03__title_box { text-align: center; margin-bottom: 70px; } @media (max-width: 750px) { .slider-03__title_box { margin-bottom: 40px; } } .slider-03__container { position: relative; text-align: center; } .slider-03__slider { position: relative; z-index: 10; top: 75px; } .slider-03__item { margin-right: 40px; } @media (max-width: 400px) { .slider-03__item { margin-right: 20px; } } .slider-03__img { opacity: 0.65; max-width: 245px; transform: scale(0.8); width: 245px; border-radius: 3px; cursor: pointer; transition: box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease; } .slider-03__img:hover { box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); } .slick-current .slider-03__img { cursor: default; opacity: 1; transform: none; } @media (max-width: 750px) { .slider-03__img { max-width: 166px; } } .slider-03__mockup_container { position: absolute; left: 0; right: 0; top: 2px; margin: auto; } @media (max-width: 750px) { .slider-03__mockup_container { top: 23px; } .slider-03 .slider-03__mockup_container .mockup__case { max-width: 200px; } } .slider-04 { padding-top: 70px; padding-bottom: 70px; } .slider-04 .slider__arrow--prev { left: 20px; } .slider-04 .slider__arrow--next { right: 20px; } @media (max-width: 1275px) { .slider-04 .slider__arrow { display: block; } } @media (max-width: 440px) { .slider-04 .slider__arrow { display: none; } } .slider-04__title_box { text-align: center; margin-bottom: 70px; } @media (max-width: 750px) { .slider-04__title_box { margin-bottom: 40px; } } .slider-04__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; } @media (max-width: 950px) { .slider-04__wrapper { flex-direction: column; } } .slider-04__slider_container { position: relative; width: 50%; text-align: center; padding-bottom: 165px; } @media (max-width: 950px) { .slider-04__slider_container { width: 100%; max-width: 480px; margin-bottom: 100px; } } @media (max-width: 750px) { .slider-04__slider_container { margin-bottom: 50px; } } .slider-04__slider { position: relative; z-index: 10; top: 76px; } .slider-04__item { text-align: center; } .slider-04__img { max-width: 245px; border-radius: 3px; margin-left: auto; margin-right: auto; } @media (max-width: 750px) { .slider-04__img { max-width: 166px; } } .slider-04__mockup_container { position: absolute; left: 0; right: 0; top: 2px; margin: auto; } @media (max-width: 750px) { .slider-04__mockup_container { top: 23px; } .slider-04 .slider-04__mockup_container .mockup__case { max-width: 200px; } } .slider-04__text_container { padding: 0; margin: 0; list-style: none; } .slider-04__feature { margin-bottom: 40px; max-width: 400px; } .slider-04__feature:last-child { margin-bottom: 0; } .slider-05 { padding-top: 70px; padding-bottom: 70px; } .slider-05 .slider__arrow--prev { left: 10px; } .slider-05 .slider__arrow--next { right: 10px; } @media (max-width: 1275px) { .slider-05 .slider__arrow { display: block; } } @media (max-width: 600px) { .slider-05 .slider__arrow { display: none; } } .slider-05__title_box { text-align: center; margin-bottom: 70px; } @media (max-width: 750px) { .slider-05__title_box { margin-bottom: 40px; } } .slider-05__wrapper { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; } @media (max-width: 950px) { .slider-05__wrapper { flex-direction: column; } } .slider-05__slider_container { position: relative; width: 60%; max-width: 750px; text-align: center; } @media (max-width: 1250px) { .slider-05__slider_container { max-width: 580px; } } @media (max-width: 950px) { .slider-05__slider_container { width: 100%; max-width: 100%; } } .slider-05__slider { position: relative; z-index: 10; } .slider-05__item { padding-bottom: 40px; padding-top: 40px; text-align: center; } @media (max-width: 950px) { .slider-05__item { padding: 40px 25px; } } .slider-05__img { max-width: 550px; width: 100%; margin-left: auto; margin-right: auto; border-radius: 10px; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); cursor: zoom-in; } @media (max-width: 1250px) { .slider-05__img { max-width: 400px; } } @media (max-width: 950px) { .slider-05__img { max-width: 700px; width: calc(100% - 180px); } } @media (max-width: 600px) { .slider-05__img { width: 100%; } } .slider-05__text_container { padding: 0; margin: 0; list-style: none; padding-left: 100px; } @media (max-width: 1370px) { .slider-05__text_container { padding-left: 70px; } } @media (max-width: 1250px) { .slider-05__text_container { padding-left: 50px; } } @media (max-width: 950px) { .slider-05__text_container { padding-left: 0; margin-top: 70px; } } .slider-05__feature { margin-bottom: 40px; max-width: 400px; } .slider-05__feature:last-child { margin-bottom: 0; } .slider-06 { position: relative; padding-top: 70px; padding-bottom: 70px; } .slider-06 .slider__arrow { bottom: 0; top: auto; } .slider-06 .slider__arrow--prev { left: 50%; transform: translateX(-130%); } .slider-06 .slider__arrow--next { right: 50%; transform: translateX(130%); } @media (max-width: 1275px) { .slider-06 .slider__arrow { display: block; } } .slider-06__title_box { text-align: center; margin-bottom: 70px; } .slider-06__container { text-align: center; } .slider-06__slider { padding-bottom: 90px; } .slider-06__item_box { padding: 10px 30px 40px; } @media (max-width: 600px) { .slider-06__item_box { padding-left: 10px; padding-right: 10px; } } .slider-06__img { max-width: 500px; border-radius: 10px; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); cursor: zoom-in; } @media (max-width: 600px) { .slider-06__img { max-width: 300px; } } .slider-07 { padding: 70px 0; } @media (max-width: 1275px) { .slider-07 .slider__arrow { display: block; } } @media (max-width: 600px) { .slider-07 .slider__arrow { display: none; } } .slider-07__wrapper { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; } @media (max-width: 950px) { .slider-07__wrapper { flex-direction: column-reverse; } } .slider-07__slider_wrapper { width: 60%; max-width: 750px; position: relative; text-align: center; } @media (max-width: 1250px) { .slider-07__slider_wrapper { max-width: 580px; } } @media (max-width: 950px) { .slider-07__slider_wrapper { width: 100%; max-width: 100%; margin-bottom: 70px; } } .slider-07__slider { position: relative; } .slider-07__item { padding: 40px 0; margin: 0 auto; } @media (max-width: 950px) { .slider-07__item { padding: 40px 25px; } } .slider-07__img { width: 100%; max-width: 550px; margin: 0 auto; border-radius: 10px; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); cursor: zoom-in; } @media (max-width: 1250px) { .slider-07__img { max-width: 400px; } } @media (max-width: 950px) { .slider-07__img { max-width: 700px; width: calc(100% - 180px); } } @media (max-width: 600px) { .slider-07__img { width: 100%; } } .slider-07__feature_container { padding: 0; margin: 0; list-style: none; max-width: 500px; margin-right: 40px; box-sizing: border-box; } @media (max-width: 1250px) { .slider-07__feature_container { max-width: 450px; } } @media (max-width: 950px) { .slider-07__feature_container { max-width: none; margin-right: 0; flex-direction: column; align-items: center; } } .slider-07__feature { padding-left: 60px; margin-bottom: 60px; position: relative; } .slider-07__feature:last-child { margin-bottom: 0; } .slider-07__feature .feature__icon { position: absolute; top: 0; left: 0; } @media (max-width: 950px) { .slider-07__feature { max-width: 400px; padding-left: 0; margin-bottom: 40px; } .slider-07__feature:last-child { margin-bottom: 0; } .slider-07__feature .feature__icon { position: relative; } } .tabs-01 { padding-top: 70px; padding-bottom: 70px; } .tabs-01__title_box { margin-bottom: 70px; text-align: center; } .tabs-01__box { text-align: center; } .tabs-01__buttons_list { padding: 0; margin: 0; list-style: none; } .tabs-01__img_list { padding: 0; margin: 0; list-style: none; position: relative; margin-top: 40px; height: 700px; } .tabs-01__img_box { position: absolute; top: 0; left: 0; height: 100%; opacity: 0; transform: scale(0.985) translateY(5px); transition: opacity 0.2s ease, transform 0.5s cubic-bezier(0.74, 0.63, 0.03, 1.18); } .tabs-01__img_box.state-active-tab { opacity: 1; transform: none; } .tabs-01__img { width: 100%; border-radius: 10px; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); } .tabs-02 { padding-top: 70px; padding-bottom: 70px; } .tabs-02__title_box { margin-bottom: 70px; text-align: center; } .tabs-02__buttons_list { padding: 0; margin: 0; list-style: none; margin-bottom: 40px; text-align: center; } .tabs-02__button_item { display: inline-block; vertical-align: top; margin: 0 7px 10px; } @media (max-width: 400px) { .tabs-02__button_item { margin-left: 3px; margin-right: 3px; } } .tabs-02__button { padding: 15px 20px 10px; border-radius: 10px; cursor: pointer; transition: background-color 0.2s ease; } .tabs-02__button:hover { background-color: #F6F6F6; } .tabs-02__button.state-active-tab { cursor: default; background-color: #DFEAFE; } @media (max-width: 400px) { .tabs-02__button { padding-left: 10px; padding-right: 10px; } } .tabs-02__button_text { max-width: 115px; margin-top: 7px; line-height: 1.4; font-weight: 700; font-size: 16px; } .state-active-tab .tabs-02__button_text { color: #23273E; } @media (max-width: 400px) { .tabs-02__button_text { font-size: 14px; } } .tabs-02__item_list { padding: 0; margin: 0; list-style: none; position: relative; margin-top: 40px; height: 700px; } .tabs-02__item_box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.74, 0.63, 0.03, 1.18); } .tabs-02__item_box.state-active-tab { opacity: 1; z-index: 10; transform: none; } .tabs-02__item { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } @media (max-width: 900px) { .tabs-02__item { justify-content: space-between; } } @media (max-width: 600px) { .tabs-02__item { flex-direction: column-reverse; } } .tabs-02__visual_box { width: 40%; } @media (max-width: 900px) { .tabs-02__visual_box { width: 25%; } } @media (max-width: 600px) { .tabs-02__visual_box { width: 100%; text-align: center; } } .tabs-02__text_box { width: 60%; max-width: 450px; } @media (max-width: 600px) { .tabs-02__text_box { width: 100%; margin-bottom: 70px; text-align: center; } } .tabs-02__cta { margin-top: 40px; } .tabs-03 { padding-top: 70px; padding-bottom: 70px; } .tabs-03__title_box { margin-bottom: 70px; text-align: center; } .tabs-03__buttons_list { padding: 0; margin: 0; list-style: none; text-align: center; } .tabs-03__item_list { padding: 0; margin: 0; list-style: none; position: relative; margin-top: 60px; height: 700px; } .tabs-03__item_box { position: absolute; top: 0; left: 0; height: 100%; opacity: 0; transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.74, 0.63, 0.03, 1.18); } .tabs-03__item_box.state-active-tab { opacity: 1; z-index: 10; transform: none; } .tabs-03__item { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } @media (max-width: 950px) { .tabs-03__item { flex-direction: column-reverse; text-align: center; } } .tabs-03__img { width: 50%; } @media (max-width: 950px) { .tabs-03__img { width: 100%; } } .tabs-03__text { max-width: 400px; } @media (max-width: 950px) { .tabs-03__text { margin-bottom: 50px; } } .tabs-03__cta { margin-top: 30px; } .tabs-04 { padding-top: 70px; padding-bottom: 70px; } .tabs-04__title_box { margin-bottom: 70px; text-align: center; } .tabs-04__box { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } @media (max-width: 750px) { .tabs-04__box { flex-direction: column-reverse; } } .tabs-04__buttons_list { padding: 0; margin: 0; list-style: none; width: 40%; text-align: left; } @media (max-width: 800px) { .tabs-04__buttons_list { width: 45%; } } @media (max-width: 750px) { .tabs-04__buttons_list { width: 100%; margin-bottom: 70px; } } .tabs-04__button_item { margin-bottom: 20px; } .tabs-04__button_item:last-child { margin-bottom: 0; } @media (max-width: 750px) { .tabs-04__button_item { text-align: center; } } .tabs-04__button { display: inline-block; padding: 20px 20px 20px; max-width: 400px; border-radius: 4px; text-align: left; cursor: pointer; transition: background-color 0.2s ease; } .tabs-04__button:hover { background-color: #F6F6F6; } .tabs-04__button.state-active-tab { background-color: #DFEAFE; cursor: default; } .tabs-04__button_title { margin-top: 0; font-size: 12px; text-transform: uppercase; } .state-active-tab .tabs-04__button_title { color: #23273E; } .tabs-04__button_text { line-height: 1.4; color: rgba(48, 48, 48, 0.8); } .state-active-tab .tabs-04__button_text { color: #23273E; } .tabs-04__item_container { width: 50%; } @media (max-width: 750px) { .tabs-04__item_container { width: 100%; } } .tabs-04__item_list { padding: 0; margin: 0; list-style: none; position: relative; height: 700px; } .tabs-04__item_box { position: absolute; top: 0; left: 0; height: 100%; opacity: 0; transform: scale(0.985) translateY(5px); transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.74, 0.63, 0.04, 1.18); } .tabs-04__item_box.state-active-tab { opacity: 1; z-index: 10; transform: none; } .tabs-04__img { width: 100%; border-radius: 10px; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); } .pricing-01 { padding-top: 70px; padding-bottom: 70px; text-align: center; } .pricing-01__cards_container { position: relative; } .pricing-01__decoration { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; z-index: -1; width: 100%; } .pricing-01__buttons { display: inline-block; position: relative; margin: 40px 0 60px; } .pricing-01__buttons_list { padding: 0; margin: 0; list-style: none; } .pricing-01__badge { position: absolute; opacity: 0; top: 50%; transform: translateY(-50%) translateX(96%) translateZ(0) scale(0.97); right: -20px; transition: opacity 0.2s ease, transform 0.2s ease; } .pricing-01__badge.state-active-tab { opacity: 1; transform: translateY(-50%) translateX(100%) translateZ(0); } @media (max-width: 600px) { .pricing-01__badge { display: none; } } .pricing-01__cards_list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; } .pricing-01__card_box { max-width: 380px; margin: 0 20px 40px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; border-radius: 10px; } .pricing-01__card_top { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; height: 140px; border-bottom: 1px solid #E9F1FF; background-color: #F6F6F6; } .pricing-01__card_img { max-height: 50px; } .pricing-01__card_bottom { padding: 35px; } .pricing-01__card_title_box { position: relative; margin-bottom: 25px; text-align: left; } .pricing-01__card_title { font-size: 22px; } .pricing-01__card_price { position: absolute; top: 0; right: 0; font-size: 22px; opacity: 0; transform: translateY(3px); transition: opacity 0.2s ease, transform 0.2s ease; } .pricing-01__card_price.state-active-tab { opacity: 1; transform: none; } .pricing-01__card_period { margin-top: 3px; font-size: 12px; color: #b9c2d2; } .pricing-01__card_info { margin-bottom: 40px; padding-right: 40px; text-align: left; color: #636363; } @media (max-width: 500px) { .pricing-01__card_info { padding-right: 0; font-size: 12px; } } .pricing-02 { padding-top: 70px; padding-bottom: 70px; text-align: center; } .pricing-02__cards_container { position: relative; } .pricing-02__decoration { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; z-index: -1; width: 100%; } .pricing-02__buttons { display: inline-block; position: relative; margin: 20px 0 40px; } .pricing-02__buttons_list { padding: 0; margin: 0; list-style: none; } .pricing-02__badge { position: absolute; opacity: 0; top: calc(50% - 2px); transform: translateY(-50%) translateX(96%) translateZ(0) scale(0.97); right: -20px; transition: opacity 0.2s ease, transform 0.2s ease; } .pricing-02__badge.state-active-tab { opacity: 1; transform: translateY(-50%) translateX(100%) translateZ(0); } @media (max-width: 600px) { .pricing-02__badge { display: none; } } .pricing-02__cards_list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; } .pricing-02__card_box { position: relative; max-width: 264px; width: 100%; margin: 0 15px 30px; padding: 40px 25px 50px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; border-radius: 10px; border: 2px solid transparent; } .pricing-02__card_box--accent { border-color: #23273E; } .pricing-02__card_img { width: 44px; } .pricing-02__card_title { margin-bottom: 30px; font-size: 22px; } .pricing-02__price_box { position: relative; height: 77px; margin-bottom: 10px; } .pricing-02__price_item { position: absolute; top: 0; left: 50%; margin: auto; opacity: 0; transform: translateY(3px) translateX(-50%); transition: opacity 0.2s ease, transform 0.2s ease; } .pricing-02__price_item.state-active-tab { opacity: 1; transform: translateX(-50%); } .pricing-02__price { display: inline-block; font-size: 64px; line-height: 1; } .pricing-02__price_symbol { top: 0; left: -10px; } .pricing-02__period { right: -5px; bottom: 4px; transform: translateX(100%); } .pricing-02__period, .pricing-02__price_symbol { position: absolute; font-size: 14px; font-weight: 700; color: #b9c2d2; } .pricing-02__info_item_text { color: #636363; } .pricing-02__info { padding: 0; margin: 0; list-style: none; margin-bottom: 40px; } .pricing-02__info_item { margin-bottom: 15px; } .pricing-02__info_item:last-child { margin-bottom: 0; } .pricing-02__info_item_box { display: inline-block; } .pricing-02__info_item_text { margin-right: 7px; } .pricing-02__info_item_icon, .pricing-02__info_item_text { display: inline-block; vertical-align: middle; } .pricing-02__info_item_icon { opacity: 0.5; transition: opacity 0.2s ease; } .pricing-02__info_item_icon:hover { opacity: 1; } .pricing-02__hover { position: absolute; opacity: 0; top: 30px; right: 15px; left: 15px; transform: translateY(5px); visibility: hidden; padding: 10px 15px 20px; border-radius: 4px; background-color: #E9F1FF; color: #23273E; text-align: left; line-height: 1.4; transition: opacity 0.2s ease, transform 0.2s ease; } .pricing-02__hover.state-visible { transform: none; opacity: 1; visibility: visible; } .pricing-02__contact_us { display: inline-block; padding: 5px 20px 7px; border-radius: 4px; font-size: 30px; font-weight: 700; text-decoration: none; color: #303030; cursor: pointer; transition: background-color 0.2s ease; } .pricing-02__contact_us:hover { background-color: #F6F6F6; } .pricing-02__subword { padding-top: 2px; font-size: 14px; color: #b9c2d2; } .pricing-03 { padding-top: 70px; padding-bottom: 70px; } .pricing-03__container { position: relative; } .pricing-03__wrapper { display: flex; justify-content: space-between; flex-wrap: wrap; } @media (max-width: 1100px) { .pricing-03__wrapper { justify-content: center; } } .pricing-03__decoration { position: absolute; z-index: -1; right: 0; top: -60px; max-width: 800px; } @media (max-width: 900px) { .pricing-03__decoration { display: none; } } .pricing-03__info { padding-right: 30px; margin-bottom: 30px; max-width: 450px; } @media (max-width: 900px) { .pricing-03__info { padding-right: 0; text-align: center; } } .pricing-03__info_text p { font-family: inherit; } .pricing-03__illustration { position: relative; margin-top: 30px; } @media (max-width: 1100px) { .pricing-03__illustration { display: none; } } .pricing-03__small_cloud, .pricing-03__mid_cloud { position: absolute; } .pricing-03__main_img { position: relative; z-index: 10; } .pricing-03__small_cloud { z-index: 5; right: -45px; top: 0; } .pricing-03__mid_cloud { z-index: 20; left: -50px; top: 0; } .pricing-03__price { width: 100%; max-width: 340px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; border-radius: 10px; text-align: center; } .pricing-03__price_top { padding: 10px 0; border-bottom: 1px solid #E9F1FF; } .pricing-03__price_bottom { padding: 40px 0; } .pricing-03__benefits_list { padding: 0; margin: 0; list-style: none; margin-bottom: 40px; } .pricing-03__benefit { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; max-width: 80%; margin-left: auto; margin-right: auto; margin-bottom: 20px; } .pricing-03__benefit:last-child { margin-bottom: 0; } .pricing-03__benefit_icon { width: 16px; margin-right: 8px; } .pricing-03__benefit_text { display: inline-block; line-height: 1.4; } .pricing-03__illustration { position: relative; cursor: pointer; } .pricing-03__illustration:hover .pricing-03__main_img { -webkit-filter: contrast(1.2); filter: contrast(1.2); } .pricing-03__main_img { position: relative; z-index: 10; height: 40px; transition: transform 10s ease, -webkit-filter 0.3s ease, transform 10s ease, filter 0.3s ease; } .state-active-animation .pricing-03__main_img { transform: translateX(-10px) translateY(0); } .pricing-03__secondary_img { position: absolute; left: 0; z-index: 1; height: 40px; transition: transform 10s ease, -webkit-filter 10s ease, transform 10s ease, filter 10s ease; } .state-active-animation .pricing-03__secondary_img { transform: translateX(40px) translateY(20px) scale(1.8) rotateZ(45deg); -webkit-filter: contrast(1.4); filter: contrast(1.4); } @keyframes main_floating { 0% { transform: translateX(0) translateY(0); } 50% { transform: translateX(-10px) translateY(0); } 100% { transform: translateX(0) translateY(0); } } @keyframes secondary_floating { 0% { transform: translateX(0) translateY(0) rotateZ(0); } 50% { transform: translateX(40px) translateY(20px) scale(1.8) rotateZ(45deg); -webkit-filter: contrast(1.4); filter: contrast(1.4); } 100% { transform: translateX(0) translateY(0) rotateZ(90deg); } } .pricing-04 { padding-top: 70px; padding-bottom: 70px; text-align: center; } .pricing-04__cards_container { position: relative; } .pricing-04__decoration { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; z-index: -1; width: 100%; } .pricing-04__buttons { display: inline-block; position: relative; margin: 20px 0 40px; } .pricing-04__buttons_list { padding: 0; margin: 0; list-style: none; } .pricing-04__badge { position: absolute; opacity: 0; top: calc(50% - 2px); transform: translateY(-50%) translateX(96%) translateZ(0) scale(0.97); right: -20px; transition: opacity 0.2s ease, transform 0.2s ease; } .pricing-04__badge.state-active-tab { opacity: 1; transform: translateY(-50%) translateX(100%) translateZ(0); } @media (max-width: 600px) { .pricing-04__badge { display: none; } } .pricing-04__cards_list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; } .pricing-04__card_box { max-width: 264px; width: 100%; margin: 0 15px 60px; } .pricing-04__card { padding: 20px 25px 25px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; border-radius: 10px; border: 2px solid transparent; } .pricing-04__card--accent { border-color: #23273E; } .pricing-04__card_title { margin-bottom: 15px; font-size: 22px; } .pricing-04__card_text, .pricing-04__card_main_text { opacity: 0.8; font-size: 14px; line-height: 1.4; } .pricing-04__card_main_text { margin-bottom: 30px; } .pricing-04__card_text { margin-bottom: 40px; } .pricing-04__price_box { position: relative; height: 77px; margin-bottom: 10px; } .pricing-04__price_item { position: absolute; top: 0; left: 50%; margin: auto; opacity: 0; transform: translateY(3px) translateX(-50%); transition: opacity 0.2s ease, transform 0.2s ease; } .pricing-04__price_item.state-active-tab { opacity: 1; transform: translateX(-50%); } .pricing-04__price { display: inline-block; font-size: 64px; line-height: 1; } .pricing-04__price_symbol { top: 0; left: -10px; } .pricing-04__period { right: -5px; bottom: 4px; transform: translateX(100%); } .pricing-04__period, .pricing-04__price_symbol { position: absolute; font-size: 14px; font-weight: 700; color: #b9c2d2; } .pricing-04__info_item_text { color: #636363; } .pricing-04__subword { padding-top: 2px; font-size: 14px; color: #b9c2d2; } .pricing-04__items { padding: 0; margin: 0; list-style: none; margin-top: 30px; padding-left: 20px; max-width: 200px; margin-left: auto; margin-right: auto; text-align: left; } .pricing-04__item { margin-bottom: 15px; } .pricing-04__item:last-child { margin-bottom: 0; } .pricing-04__item_text { display: inline-block; max-width: 110px; } .pricing-04__item_icon { position: relative; top: 5px; vertical-align: top; height: 12px; margin-right: 10px; } .pricing-04__action_container { margin-top: 40px; } .pricing-04__action_wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; padding: 20px 20px; border-radius: 10px; border: 2px solid #eee; } @media (max-width: 500px) { .pricing-04__action_wrapper { flex-wrap: wrap; justify-content: center; } } .pricing-04__action_text { padding-right: 40px; text-align: left; line-height: 1.4; } @media (max-width: 500px) { .pricing-04__action_text { padding-right: 0; margin-bottom: 20px; text-align: center; } } .video-01 { padding: 70px 0 70px; } .video-01__item { overflow: hidden; position: relative; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); height: 591px; border-radius: 10px; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); background-color: #303030; } .video-01__item .spinner { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } @media (max-width: 600px) { .video-01__item { height: 300px; } } .video-01__iframe { position: relative; z-index: 10; height: 100%; width: 100%; } .video-02 { padding: 70px 0 70px; } .video-02__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .video-02__item { overflow: hidden; position: relative; width: 50%; height: 350px; border-radius: 10px; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); background-color: #303030; } .video-02__item .spinner { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } @media (max-width: 750px) { .video-02__item { width: 100%; } } @media (max-width: 500px) { .video-02__item { height: 200px; } } .video-02__iframe { position: relative; z-index: 10; height: 100%; width: 100%; } .video-02__text_box { width: 50%; max-width: 500px; padding-left: 40px; } .video-02__text_box .feature { margin-bottom: 35px; } .video-02__text_box .feature:last-child { margin-bottom: 0; } @media (max-width: 750px) { .video-02__text_box { margin-top: 40px; width: 100%; padding-left: 0; } } .video-03 { padding: 70px 0 70px; } .video-03__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; flex-direction: row-reverse; } @media (max-width: 750px) { .video-03__wrapper { flex-direction: row; } } .video-03__item { overflow: hidden; position: relative; width: 50%; height: 350px; border-radius: 10px; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); background-color: #303030; } .video-03__item .spinner { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } @media (max-width: 750px) { .video-03__item { width: 100%; } } @media (max-width: 500px) { .video-03__item { height: 200px; } } .video-03__iframe { position: relative; z-index: 10; height: 100%; width: 100%; } .video-03__text_box { width: 50%; max-width: 500px; padding-right: 40px; } .video-03__text_box .feature { margin-bottom: 35px; } .video-03__text_box .feature:last-child { margin-bottom: 0; } @media (max-width: 750px) { .video-03__text_box { margin-top: 40px; width: 100%; padding-right: 0; } } .video-04 { padding: 70px 0; } .video-04__container { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; } @media (max-width: 900px) { .video-04__container { flex-direction: column; justify-content: center; align-items: center; } } .video-04__container::after { display: none; } .video-04__item { width: 45%; max-width: 450px; height: 300px; margin-right: 50px; margin-bottom: 50px; overflow: hidden; position: relative; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); border-radius: 10px; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); background-color: #303030; } .video-04__item:nth-last-child(-n+2) { margin-bottom: 0; } .video-04__item:nth-child(2n) { margin-right: 0; } .video-04__item .spinner { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } @media (max-width: 900px) { .video-04__item { width: 100%; margin-right: 0; margin-bottom: 20px; } .video-04__item:nth-last-child(-n+2) { margin-bottom: 20px; } .video-04__item:nth-last-child(1) { margin-bottom: 0; } } @media (max-width: 450px) { .video-04__item { max-width: 300px; height: 200px; } } .video-04__iframe { width: 100%; height: 100%; position: relative; z-index: 10; } .posts-01 { padding: 70px 0 70px; } .posts-01__wrapper { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .posts-01__item { display: block; overflow: hidden; height: 300px; width: 30%; margin: 15px; min-width: 300px; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); text-decoration: none; transition: box-shadow 0.2s ease, transform 0.2s ease; } .posts-01__item:hover, .posts-01__item:focus { transform: translateY(-5px); box-shadow: 0 2px 8px 0 rgba(136, 144, 195, 0.22), 0 8px 15px 0 rgba(37, 44, 97, 0.17); } @media (max-width: 600px) { .posts-01__item { width: 100%; min-width: auto; } } .posts-01__img { display: flex; align-items: flex-end; height: 100%; background-size: cover; background-position: center top; background-repeat: no-repeat; } .posts-01__text { padding: 10px 15px 20px; width: 100%; background-color: white; } .posts-01__info { color: #636363; line-height: 1.4; } .posts-01__link { padding-top: 40px; text-align: center; } .posts-02 { padding: 70px 0 70px; background-color: #F6F6F6; } .posts-02__wrapper { display: flex; justify-content: space-between; flex-wrap: wrap; } .posts-02__item { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; width: calc(50% - 10px); padding: 28px 20px 36px 20px; border-radius: 10px; border: 1px solid #eee; } .posts-02__item--accent { background-color: white; border: none; } @media (max-width: 760px) { .posts-02__item { width: 100%; margin-bottom: 20px; } .posts-02__item:last-child { margin-bottom: 0; } } .posts-02__text { width: 70%; padding-right: 10px; } .posts-02__title { margin-top: 0; } .posts-02__info { line-height: 1.4; opacity: 0.6; font-size: 14px; } .posts-02__img { height: 80px; width: 80px; border-radius: 10px; background-size: cover; background-position: center top; background-repeat: no-repeat; } @media (max-width: 450px) { .posts-02__img { width: 60px; height: 60px; } } .posts-03 { padding: 70px 0 70px; } .posts-03__wrapper { overflow: hidden; position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); } .posts-03__img_box { position: absolute; top: 0; bottom: 0; width: 30%; background-size: cover; background-position: center top; background-repeat: no-repeat; } @media (max-width: 760px) { .posts-03__img_box { display: none; } } .posts-03__text_box { position: relative; padding: 50px 200px 70px calc(30% + 40px); } @media (max-width: 900px) { .posts-03__text_box { padding-right: 50px; } } @media (max-width: 760px) { .posts-03__text_box { padding-left: 40px; } } @media (max-width: 500px) { .posts-03__text_box { padding: 40px 20px 30px 20px; } } .posts-03__logo { display: inline-block; max-height: 36px; margin-bottom: 15px; } .posts-03__author { line-height: 1.4; font-weight: 700; } .posts-03__text { opacity: 0.8; margin-bottom: 30px; } @media (max-width: 400px) { .posts-03__text { margin-bottom: 15px; } } .posts-03__tags_box { padding: 0; margin: 0; list-style: none; position: absolute; top: 50px; right: 40px; } @media (max-width: 500px) { .posts-03__tags_box { top: 40px; right: 20px; } } @media (max-width: 450px) { .posts-03__tags_box { display: none; } } .posts-03__tag { display: inline-block; margin-right: 10px; } .posts-03__tag:last-child { margin-right: 0; } .posts-03__link { position: absolute; right: 40px; bottom: 40px; } @media (max-width: 500px) { .posts-03__link { right: 20px; bottom: 30px; } } @media (max-width: 400px) { .posts-03__link { position: static; margin-top: 20px; } } .posts-04 { padding: 70px 0 70px; } .posts-04__wrapper { overflow: hidden; position: relative; display: flex; justify-content: center; flex-wrap: nowrap; padding: 20px; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); } @media (max-width: 700px) { .posts-04__wrapper { flex-wrap: wrap; } } .posts-04__item { padding: 15px 40px 10px; margin-right: 20px; width: 220px; border-radius: 4px; text-align: center; text-decoration: none; transition: background-color 0.2s ease; } .posts-04__item:last-child { margin-right: 0; } .posts-04__item:hover, .posts-04__item:focus { background-color: #eef4fe; } @media (max-width: 700px) { .posts-04__item { margin-right: 0; } } .posts-04__img { max-height: 60px; max-width: 60px; } .posts-04__title { margin-bottom: 10px; } .posts-04__text { opacity: 0.7; line-height: 1.4; font-size: 14px; color: #303030; } .posts-05 { padding: 70px 0 70px; background-color: #F6F6F6; } .posts-05__wrapper { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; } .posts-05__item { display: block; overflow: hidden; width: 30%; margin: 15px; min-width: 350px; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; transition: box-shadow 0.2s ease, transform 0.2s ease; } @media (max-width: 600px) { .posts-05__item { width: 100%; min-width: auto; } } .posts-05__img_box { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; height: 140px; } .posts-05__img { max-width: 70%; max-height: 50px; width: 100%; } .posts-05__text { padding: 15px 45px 25px; width: 100%; } @media (max-width: 600px) { .posts-05__text { padding-right: 15px; padding-left: 15px; } } .posts-05__title { margin-bottom: 20px; } .posts-05__title_info { opacity: 0.6; margin-left: 5px; font-size: 14px; white-space: nowrap; font-weight: 400; } .posts-05__info { color: #7d7d7d; line-height: 1.4; } .posts-05__link { margin-top: 20px; } .posts-05__pill_link { padding-top: 40px; text-align: center; } .posts-06 { padding: 70px 0; background-color: #F6F6F6; } .posts-06__wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; } @media (max-width: 600px) { .posts-06__wrapper { flex-direction: column; align-items: center; } } .posts-06__card_holder { width: calc(100%/3 - 24px); height: 235px; margin-right: 36px; margin-bottom: 40px; position: relative; } .posts-06__card_holder:nth-child(3n) { margin-right: 0; } .posts-06__card_holder:last-child { margin-right: 0; } @media (max-width: 850px) { .posts-06__card_holder { width: calc(100%/2 - 20px); max-width: 250px; margin-bottom: 40px; margin-right: 40px; } .posts-06__card_holder:nth-child(2n) { margin-right: 0; } .posts-06__card_holder:nth-child(3n) { margin-right: 40px; } .posts-06__card_holder:last-child { margin-bottom: 0; } } @media (max-width: 850px) and (max-width: 600px) { .posts-06__card_holder { width: 100%; max-width: 300px; margin-right: 0; } } @media (max-width: 850px) { .posts-06__card_holder:nth-child(3n) { margin-right: 0; } } .posts-06__card { width: 100%; padding: 15px; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; border-radius: 10px; background-color: white; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); } .posts-06__card--bottom { width: 90%; height: 100%; margin: auto; position: absolute; left: 0; right: 0; top: 10px; z-index: 1; } .posts-06__card--middle { width: 95%; height: 100%; margin: auto; position: absolute; left: 0; right: 0; top: 5px; z-index: 2; } .posts-06__card--top { width: 100%; height: 100%; position: relative; z-index: 3; } @media (max-width: 850px) { .posts-06__card--top { margin: 0 auto; } } .posts-06__title { margin-top: 0; margin-bottom: 20px; font-size: 20px; line-height: 1.4; color: #20313C; } .posts-06__image_box { width: 100px; height: 100px; margin-bottom: 10px; display: flex; align-items: flex-start; justify-content: center; } .posts-06__image { max-width: 100px; max-height: 100px; } .clients-01 { padding: 70px 0 70px; text-align: center; } .clients-01__list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 70px auto auto; max-width: 450px; } .clients-01__item { width: 25%; margin-bottom: 40px; } @media (max-width: 500px) { .clients-01__item { width: 32%; } } @media (max-width: 360px) { .clients-01__item { width: 50%; } } .clients-01__logo { max-height: 40px; } .clients-02 { padding: 70px 0 70px; text-align: center; } .clients-02__wrapper { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .clients-02__logos { position: relative; padding: 30px 40px 0 40px; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); } .clients-02__img { position: absolute; width: 30px; top: 0; left: 0; right: 0; margin: auto; transform: translateY(-50%); } .clients-02__title { margin-top: 0; } .clients-02__list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 40px auto auto; max-width: 450px; } .clients-02__item { width: 25%; margin-bottom: 40px; } @media (max-width: 500px) { .clients-02__item { width: 32%; } } @media (max-width: 360px) { .clients-02__item { width: 50%; } } .clients-02__logo { max-height: 40px; } .clients-02__text_box { list-style: none; padding: 50px; } @media (max-width: 400px) { .clients-02__text_box { padding-left: 0; padding-right: 0; padding-bottom: 0; } } .clients-02__text_item { margin-bottom: 25px; text-align: left; } .clients-02__text_item:last-child { margin-bottom: 0; } .clients-02__text { display: inline-block; line-height: 1.4; padding: 7px 15px; border-radius: 4px; background-color: #F6F6F6; } .clients-03 { padding: 70px 0 30px; text-align: center; } .clients-03__list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .clients-03__item { margin: 0 30px 40px; } .clients-03__logo { max-height: 40px; transform: translateZ(0); -webkit-filter: grayscale(1); filter: grayscale(1); transition: -webkit-filter 0.25s ease, filter 0.25s ease; } .clients-03__logo:hover { -webkit-filter: grayscale(0); filter: grayscale(0); } .cta_form-01 { background-color: #23273E; } .cta_form-01__container { max-width: 600px; padding-top: 40px; padding-bottom: 80px; } .cta_form-01__heading_box { text-align: center; } .cta_form-01__heading { position: relative; display: inline-block; } @media (min-width: 1000px) { .cta_form-01__tag { position: absolute; top: 0; right: 0; transform: translateY(-65%) translateX(103%); } } .cta_form-02 { position: relative; padding-top: 100px; padding-bottom: 100px; background-color: #23273E; background-size: cover; background-position: center; } @media (max-width: 500px) { .cta_form-02 { padding-top: 50px; padding-bottom: 50px; } } .cta_form-02__overlay { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-color: rgba(0, 0, 0, 0.7); } .cta_form-02__content { position: relative; z-index: 10; } .cta_form-02__container { max-width: 600px; padding-top: 40px; padding-bottom: 80px; } .cta_form-02__heading_box { text-align: center; } .cta_form-02__heading { position: relative; display: inline-block; } @media (min-width: 1000px) { .cta_form-02__tag { position: absolute; top: 0; right: 0; transform: translateY(-65%) translateX(103%); } } .cta_form-03 { padding-top: 70px; padding-bottom: 70px; background-color: #23273E; } .cta_form-03__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 45px 30px; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; } .cta_form-03__heading_box { max-width: 270px; } @media (max-width: 750px) { .cta_form-03__heading_box { max-width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 30px; text-align: center; } } .cta_form-03__heading { margin-top: 0; } .cta_form-03__text { font-size: 14px; line-height: 1.4; opacity: 0.6; } .cta_form-03__form_box { width: calc(100% - 300px); } @media (max-width: 750px) { .cta_form-03__form_box { width: 100%; } } .cta_form-04 { padding-top: 70px; padding-bottom: 70px; } .cta_form-04__wrapper { border-radius: 10px; border: 1px solid #eee; text-align: center; } .cta_form-04__top { padding: 45px 20px; border-bottom: 1px solid #eee; } @media (max-width: 400px) { .cta_form-04__top { padding-top: 30px; } } .cta_form-04__heading { margin-top: 0; margin-bottom: 30px; } .cta_form-04__text { font-size: 14px; line-height: 1.4; opacity: 0.6; } .cta_form-04__form_box { width: 100%; max-width: 500px; margin-left: auto; margin-right: auto; } .cta_form-04__features { padding: 0; margin: 0; list-style: none; margin-top: 20px; } .cta_form-04__feature { position: relative; display: inline-block; opacity: 0.65; margin-right: 25px; font-size: 10px; letter-spacing: 0.012em; text-transform: uppercase; font-weight: 700; } .cta_form-04__feature:last-child { margin-right: 0; } .cta_form-04__feature:last-child:after { content: none; } .cta_form-04__feature:after { content: ""; position: absolute; width: 4px; height: 4px; right: -17px; top: 50%; transform: translateY(-50%); border-radius: 50%; background-color: rgba(48, 48, 48, 0.3); } .cta_form-04__bottom { padding: 20px 20px 40px; } .cta_form-04__bottom_text { opacity: 0.8; line-height: 1.4; } @keyframes shake { 0% { transform: translateY(0); } 20% { transform: translateY(2px); } 40% { transform: translateY(-2px); } 60% { transform: translateY(2px); } 80% { transform: translateY(-2px); } 100% { transform: translateY(0); } } .cta_form-05, .cta_form-06, .cta_form-07 { padding-top: 25px; padding-bottom: 45px; background-color: #23273E; } .cta_form-05__logo_link, .cta_form-06__logo_link, .cta_form-07__logo_link { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; display: block; } .cta_form-05__logo, .cta_form-06__logo, .cta_form-07__logo { max-height: 30px; margin: 0 auto 20px; display: block; } .cta_form-05__wrapper, .cta_form-06__wrapper, .cta_form-07__wrapper { padding: 20px 20px 30px 20px; margin-bottom: 30px; box-shadow: 0 2px 8px 0 rgba(136, 144, 195, 0.22), 0 8px 15px 0 rgba(37, 44, 97, 0.17); border-radius: 10px; background-color: white; } .cta_form-05__wrapper .form__button, .cta_form-06__wrapper .form__button, .cta_form-07__wrapper .form__button { margin-left: 0; text-align: center; } .cta_form-05__wrapper .form__inputs, .cta_form-06__wrapper .form__inputs, .cta_form-07__wrapper .form__inputs { margin-bottom: 30px; } .cta_form-05__wrapper .text-input, .cta_form-06__wrapper .text-input, .cta_form-07__wrapper .text-input { margin-bottom: 15px; } .cta_form-05__wrapper .text-input:last-child, .cta_form-06__wrapper .text-input:last-child, .cta_form-07__wrapper .text-input:last-child { margin-bottom: 0; } .cta_form-05__title, .cta_form-06__title, .cta_form-07__title { margin-top: 0; margin-bottom: 15px; font-size: 14px; line-height: 1.4; } .cta_form-05__services_text, .cta_form-06__services_text, .cta_form-07__services_text { margin-bottom: 25px; font-size: 14px; line-height: 1.4; color: white; text-align: center; } .cta_form-05__services_list, .cta_form-06__services_list, .cta_form-07__services_list { padding: 0; margin: 0; list-style: none; margin-bottom: 30px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .cta_form-05__services_item, .cta_form-06__services_item, .cta_form-07__services_item { width: 40px; height: 40px; margin-right: 15px; margin-bottom: 15px; } .cta_form-05__services_item:last-child, .cta_form-06__services_item:last-child, .cta_form-07__services_item:last-child { margin-right: 0; } .cta_form-05__link, .cta_form-06__link, .cta_form-07__link { width: 100%; height: 100%; border-radius: 50%; background-color: white; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 8px 0 rgba(136, 144, 195, 0.22), 0 8px 15px 0 rgba(37, 44, 97, 0.17); transition: transform 0.2s ease; } .cta_form-05__link:hover, .cta_form-06__link:hover, .cta_form-07__link:hover { transform: translateY(-2px); } .cta_form-05__icon, .cta_form-06__icon, .cta_form-07__icon { max-width: 16px; max-height: 16px; } .cta_form-05__terms, .cta_form-06__terms, .cta_form-07__terms { max-width: 280px; margin: 0 auto 40px; font-size: 14px; line-height: 1.4; color: white; text-align: center; } .cta_form-05__terms_link, .cta_form-06__terms_link, .cta_form-07__terms_link { font-size: 14px; color: white; text-align: center; text-decoration: underline; } .cta_form-05__member_text, .cta_form-06__member_text, .cta_form-07__member_text { margin-bottom: 15px; font-size: 14px; line-height: 1.4; color: white; text-align: center; } .cta_form-05__button, .cta_form-06__button, .cta_form-07__button { text-align: center; } .cta_form-05__error_box { display: none; } .cta_form-05__error_box.state-visible { display: block; animation: shake ease 0.4s 1; } .cta_form-05__email_error, .cta_form-06__email_error, .cta_form-07__email_error { max-width: 230px; min-height: 25px; padding: 5px 15px; margin: 0 auto 30px; border-radius: 4px; background-color: #F90473; box-sizing: border-box; display: flex; align-items: center; position: relative; animation: shake 0.5s 1; } .cta_form-05__warning, .cta_form-06__warning, .cta_form-07__warning { max-width: 20px; max-height: 20px; margin-right: 15px; } .cta_form-05__text_error, .cta_form-06__text_error, .cta_form-07__text_error { font-size: 12px; line-height: 1.4; text-align: left; text-transform: uppercase; color: white; } .cta_form-06__top_box { margin-bottom: 15px; display: flex; align-items: center; } .cta_form-06__title { max-width: 50%; margin: 0; font-size: 14px; line-height: 1.4; text-align: center; } .cta_form-06__reset { max-width: 50%; margin-left: auto; font-size: 12px; opacity: 0.4; color: #303030; text-decoration: underline; text-align: center; transition: opacity 0.2s ease; } .cta_form-06__reset:hover { opacity: 0.7; } .cta_form-08 { padding: 70px 0; } .cta_form-08__wrapper { padding: 50px 30px 60px; background-color: #23273E; border-radius: 10px; position: relative; } .cta_form-08__wrapper .form__inputs { flex-wrap: nowrap; justify-content: center; } .cta_form-08__wrapper .text-input { max-width: 200px; margin-right: 15px; } @media (max-width: 800px) { .cta_form-08__wrapper { padding-bottom: 40px; } .cta_form-08__wrapper .form__inputs { flex-direction: column; align-items: center; } .cta_form-08__wrapper .text-input { max-width: 400px; margin-right: 0; margin-bottom: 15px; } } @media (max-width: 400px) { .cta_form-08__wrapper .form__inputs { display: flex; } } .cta_form-08__emoji { max-width: 75px; position: absolute; top: -45px; left: 50%; transform: translateX(-50%); } .cta_form-08__heading { max-width: 500px; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 30px; color: white; text-align: center; } .cta_form-08__email_error { max-width: 230px; min-height: 25px; padding: 5px 15px; margin: 0 auto 30px; border-radius: 4px; background-color: #F90473; box-sizing: border-box; display: flex; align-items: center; position: relative; animation: shake 0.5s 1; } .cta_form-08__email_error--ok { display: none; } .cta_form-08__ajax_error { max-width: 230px; min-height: 25px; padding: 5px 15px; margin: 0 auto 30px; border-radius: 4px; background-color: #F90473; box-sizing: border-box; display: flex; align-items: center; position: relative; animation: shake 0.5s 1; } .cta_form-08__ajax_error--ok { display: none; } .cta_form-08__ajax_text { font-size: 12px; line-height: 1.4; text-align: left; text-transform: uppercase; color: white; } .cta_form-08__warning { max-width: 20px; max-height: 20px; margin-right: 15px; } .cta_form-08__text_error { font-size: 12px; line-height: 1.4; text-align: left; text-transform: uppercase; color: white; } .cta_form-09 { padding: 70px 0; } .cta_form-09__wrapper { padding: 60px 100px 40px; margin-bottom: 50px; border-radius: 10px; border: 1px solid rgba(151, 151, 151, 0.2); } @media (max-width: 750px) { .cta_form-09__wrapper { padding: 30px 50px 20px; } } @media (max-width: 550px) { .cta_form-09__wrapper { padding: 30px 25px 20px; } } .cta_form-09__heading_box { text-align: center; } .cta_form-09__heading { position: relative; display: inline-block; } @media (min-width: 1000px) { .cta_form-09__tag { position: absolute; top: 0; right: 0; transform: translateY(-65%) translateX(103%); } } .cta_form-09__social_box { display: flex; align-items: center; justify-content: center; } .cta_form-09__text { margin-right: 25px; font-size: 14px; line-height: 1.4; } .cta_form-09__social_list { padding: 0; margin: 0; list-style: none; max-width: 180px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .cta_form-09__social_item { width: 45px; height: 45px; margin-right: 15px; } .cta_form-09__social_item:last-child { margin-right: 0; } .cta_form-09__social_item:nth-child(3n) { margin-right: 0; } .cta_form-09__social_item:nth-child(n+4) { margin-top: 15px; } .cta_form-09__social_link { width: 100%; height: 100%; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: box-shadow 0.2s ease, transform 0.2s ease; } .cta_form-09__social_link:hover { transform: translateY(-2px); box-shadow: 0 2px 8px 0 rgba(136, 144, 195, 0.22), 0 8px 15px 0 rgba(37, 44, 97, 0.17); } .cta_form-09__social_logo { max-height: 15px; max-width: 40px; } .cta_form-10 { padding-top: 85px; padding-bottom: 55px; background-size: cover; background-repeat: no-repeat; background-position: center; } .cta_form-10__heading { margin-top: 0; margin-bottom: 25px; color: white; text-align: center; } .cta_form-10__top_text { margin-top: 0; margin-bottom: 50px; font-size: 16px; color: white; text-align: center; } .cta_form-10__form_box .form__inputs { position: relative; } .cta_form-10__form_box .form__input_wrapper { width: 100%; margin-bottom: 15px; display: flex; } .cta_form-10__form_box .form__input_wrapper .form__input { margin-bottom: 0; } .cta_form-10__form_box .form__input_wrapper .form__input:first-child { margin-right: 15px; } .cta_form-10__form_box .form__input { width: 100%; margin-bottom: 15px; } .cta_form-10__form_box .form__select { width: 100%; height: 44px; padding: 0 20px; margin-bottom: 15px; border-radius: 4px; background-color: rgba(246, 246, 246, 0.3); border: 2px solid #D8DDE6; font-size: 14px; color: rgba(255, 255, 255, 0.5); transition: border-color 0.2s ease, background-color 0.2s ease; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; } .cta_form-10__form_box .form__select:focus { border-color: #23273E; background-color: rgba(246, 246, 246, 0.2); } .cta_form-10__form_box .form__textarea { width: 100%; min-height: 100px; padding: 10px 20px; margin-bottom: 35px; border-radius: 4px; background-color: rgba(246, 246, 246, 0.3); border: 2px solid #D8DDE6; font-size: 14px; color: white; transition: border-color 0.2s ease, background-color 0.2s ease; outline: none; resize: none; } .cta_form-10__form_box .form__textarea::-webkit-input-placeholder { opacity: 0.5; font-size: inherit; color: inherit; transition: opacity 0.2s ease, transform 0.2s ease; } .cta_form-10__form_box .form__textarea:-moz-placeholder { opacity: 0.5; font-size: inherit; color: inherit; transition: opacity 0.2s ease, transform 0.2s ease; } .cta_form-10__form_box .form__textarea::-moz-placeholder { opacity: 0.5; font-size: inherit; color: inherit; transition: opacity 0.2s ease, transform 0.2s ease; } .cta_form-10__form_box .form__textarea:-ms-input-placeholder { opacity: 0.5; font-size: inherit; color: inherit; transition: opacity 0.2s ease, transform 0.2s ease; } .cta_form-10__form_box .form__textarea:focus { border-color: #23273E; background-color: rgba(246, 246, 246, 0.2); } .cta_form-10__form_box .form__textarea:focus::-webkit-input-placeholder { opacity: 0; transform: translateX(10px); } .cta_form-10__form_box .form__textarea:focus:-ms-input-placeholder { opacity: 0; transform: translateX(10px); } .cta_form-10__form_box .form__textarea:focus::placeholder { opacity: 0; transform: translateX(10px); } .cta_form-10__form_box .form__button { width: 100%; text-align: center; } .cta_form-10__form_box .form__checkbox { width: 100%; margin-bottom: 35px; display: flex; align-items: center; justify-content: center; } .cta_form-10__form_box .form__label { padding-left: 10px; font-size: 16px; line-height: 1.4; color: white; cursor: pointer; } .cta_form-10__form_box .form__terms_link { color: inherit; text-decoration: underline; } .cta_form-10__form_box .form__messages { bottom: -20px; } .cta_form-11 { padding: 70px 0; } .cta_form-11__wrapper { border-radius: 10px; border: 1px solid #eee; text-align: center; } .cta_form-11__top { padding: 45px 20px; border-bottom: 1px solid #eee; } @media (max-width: 400px) { .cta_form-11__top { padding-top: 30px; } } .cta_form-11__heading { margin-top: 0; margin-bottom: 30px; } .cta_form-11__text { font-size: 14px; line-height: 1.4; opacity: 0.6; } .cta_form-11__form_box { width: 100%; max-width: 500px; margin-left: auto; margin-right: auto; } .cta_form-11__form_box .form__inputs { max-width: 450px; margin: 0 auto; position: relative; } .cta_form-11__form_box .form__input { width: 100%; margin-bottom: 15px; } .cta_form-11__form_box .form__input_wrapper { width: 100%; margin-bottom: 20px; display: flex; align-items: center; } .cta_form-11__form_box .form__input_wrapper .form__input:first-child { margin-right: 15px; } .cta_form-11__form_box .form__button { width: 100%; margin-left: 0; text-align: center; } .cta_form-11__form_box .form__messages { bottom: -213px; } .cta_form-11__features { padding: 0; margin: 0; list-style: none; margin-top: 20px; } .cta_form-11__feature { position: relative; display: inline-block; opacity: 0.65; margin-right: 25px; font-size: 10px; letter-spacing: 0.012em; text-transform: uppercase; font-weight: 700; } .cta_form-11__feature:last-child { margin-right: 0; } .cta_form-11__feature:last-child:after { content: none; } .cta_form-11__feature:after { content: ""; position: absolute; width: 4px; height: 4px; right: -17px; top: 50%; transform: translateY(-50%); border-radius: 50%; background-color: rgba(48, 48, 48, 0.3); } .cta_form-11__bottom { padding: 20px 20px 40px; } .cta_form-11__bottom_text { opacity: 0.8; line-height: 1.4; } .cta_form-12 { padding: 90px 0; background-color: #EDEDED; } .cta_form-12__form_box { padding: 40px 20px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); border-radius: 10px; background-color: white; position: relative; } .cta_form-12__image { max-width: 120px; max-height: 80px; position: absolute; top: -76px; left: 50%; transform: translateX(-50%); } .cta_form-12__heading { max-width: 500px; margin: 0 auto 13px; font-size: 20px; line-height: 1.4; text-align: center; } .cta_form-12__top_text { max-width: 500px; margin: 0 auto 25px; font-size: 14px; color: rgba(48, 48, 48, 0.6); text-align: center; } .cta_form-12__form { max-width: 350px; margin: 0 auto; } .cta_form-12__form .form__inputs { position: relative; } .cta_form-12__form .form__input { width: 100%; margin-bottom: 15px; } .cta_form-12__form .form__textarea { width: 100%; min-height: 100px; padding: 10px 20px; margin-bottom: 35px; border-radius: 4px; background-color: rgba(246, 246, 246, 0.3); border: 2px solid #D8DDE6; font-size: 14px; transition: border-color 0.2s ease, background-color 0.2s ease; outline: none; resize: none; } .cta_form-12__form .form__textarea::-webkit-input-placeholder { opacity: 0.5; font-size: inherit; color: inherit; transition: opacity 0.2s ease, transform 0.2s ease; } .cta_form-12__form .form__textarea:-moz-placeholder { opacity: 0.5; font-size: inherit; color: inherit; transition: opacity 0.2s ease, transform 0.2s ease; } .cta_form-12__form .form__textarea::-moz-placeholder { opacity: 0.5; font-size: inherit; color: inherit; transition: opacity 0.2s ease, transform 0.2s ease; } .cta_form-12__form .form__textarea:-ms-input-placeholder { opacity: 0.5; font-size: inherit; color: inherit; transition: opacity 0.2s ease, transform 0.2s ease; } .cta_form-12__form .form__textarea:focus { border-color: #23273E; background-color: rgba(246, 246, 246, 0.2); } .cta_form-12__form .form__textarea:focus::-webkit-input-placeholder { opacity: 0; transform: translateX(10px); } .cta_form-12__form .form__textarea:focus:-ms-input-placeholder { opacity: 0; transform: translateX(10px); } .cta_form-12__form .form__textarea:focus::placeholder { opacity: 0; transform: translateX(10px); } .cta_form-12__form .form__messages { margin-top: 0; top: 45px; } .cta_form-12__form .form__button { width: 100%; margin-left: 0; text-align: center; } .cta_button-01, .cta_button-04, .cta_button-06 { padding: 70px 0 70px; } .cta_button-01__button_box, .cta_button-04__button_box, .cta_button-06__button_box { text-align: center; } .cta_button-01__button_wrapper, .cta_button-04__button_wrapper, .cta_button-06__button_wrapper { display: inline-block; position: relative; } .cta_button-01__tag, .cta_button-04__tag, .cta_button-06__tag { position: relative; z-index: 10; transform: translateY(20%); } @media (min-width: 1000px) { .cta_button-01__tag, .cta_button-04__tag, .cta_button-06__tag { position: absolute; top: 0; right: 0; transform: translateY(-50%) translateX(75%); } } .cta_button-02 { padding: 70px 0 70px; } .cta_button-02__img_box { text-align: center; } .cta_button-02__img { animation: levitate 4s linear infinite; width: 50px; } @keyframes levitate { 0% { transform: translateY(-5%); } 50% { transform: translateY(5%); } 100% { transform: translateY(-5%); } } .cta_button-03, .cta_button-07, .cta_button-08, .cta_button-09 { position: relative; padding-top: 80px; padding-bottom: 80px; background-color: #23273E; } .cta_button-03:before, .cta_button-07:before, .cta_button-08:before, .cta_button-09:before { content: ""; opacity: 0.4; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url(../img/other/white-waves.svg); } .cta_button-03__wrapper, .cta_button-07__wrapper, .cta_button-08__wrapper, .cta_button-09__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; position: relative; z-index: 10; } @media (max-width: 750px) { .cta_button-03__wrapper, .cta_button-07__wrapper, .cta_button-08__wrapper, .cta_button-09__wrapper { display: block; text-align: center; } } .cta_button-03__title_box, .cta_button-07__title_box, .cta_button-08__title_box, .cta_button-09__title_box { max-width: 300px; } @media (max-width: 750px) { .cta_button-03__title_box, .cta_button-07__title_box, .cta_button-08__title_box, .cta_button-09__title_box { margin-left: auto; margin-right: auto; margin-bottom: 40px; } } .cta_button-03__text, .cta_button-07__text, .cta_button-08__text, .cta_button-09__text { opacity: 0.8; font-size: 14px; } .cta_button-03__title, .cta_button-07__title, .cta_button-08__title, .cta_button-09__title { margin-top: 5px; font-size: 20px; } .cta_button-10 { padding: 70px 0 70px; } .cta_button-10__button_box { text-align: center; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } @media (max-width: 700px) { .cta_button-10__button_box { justify-content: center; } } .cta_button-10__button_wrapper { display: inline-block; position: relative; } .cta_button-10__list { padding: 0; margin: 0; list-style: none; } .cta_button-10__item { vertical-align: top; display: inline-block; } .cta_button-10__link { text-decoration: none; text-align: center; } .cta_button-10__logo_box { height: 40px; margin-bottom: 7px; } .cta_button-10__text { text-transform: uppercase; font-weight: 700; color: #00396B; font-size: 12px; } .cta_button-10__link { display: inline-flex; justify-content: center; align-items: center; flex-wrap: nowrap; flex-direction: column; height: 90px; width: 90px; border-radius: 4px; transition: background-color 0.2s ease; } .cta_button-10__link:hover { background-color: #DFEAFE; } .cta_button-11 { padding: 70px 0 70px; background-color: rgba(0, 0, 0, 0.9); } .cta_button-11__container { max-width: 650px; } .cta_button-11__button_box { text-align: center; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } @media (max-width: 700px) { .cta_button-11__button_box { justify-content: center; } } .cta_button-11__button_wrapper { display: inline-block; position: relative; } .cta_button-11__list { padding: 0; margin: 0; list-style: none; } @media (max-width: 700px) { .cta_button-11__list { margin-left: 7px; margin-right: 7px; } } .cta_button-11__item { vertical-align: top; display: inline-block; margin-right: 10px; } .cta_button-11__item:last-child { margin-right: 0; } @media (max-width: 700px) { .cta_button-11__item { margin-bottom: 20px; } } .cta_button-11__link { text-decoration: none; text-align: center; } .cta_button-11__logo_box { height: 40px; margin-bottom: 7px; } .cta_button-11__text { text-transform: uppercase; font-weight: 700; color: #00396B; font-size: 12px; } .cta_button-11__link { display: inline-flex; justify-content: center; align-items: center; flex-wrap: nowrap; flex-direction: column; height: 90px; width: 90px; border-radius: 4px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; transition: background-color 0.2s ease, transform 0.2s ease; } .cta_button-11__link:hover { transform: translateY(-3px); background-color: #DFEAFE; } .cta_button-12, .cta_button-13, .cta_button-14, .cta_button-15 { position: relative; padding: 70px 0 100px; background-size: cover; background-position: center; background-repeat: no-repeat; } .cta_button-12__overlay, .cta_button-13__overlay, .cta_button-14__overlay, .cta_button-15__overlay { position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1; margin: auto; background-color: rgba(0, 0, 0, 0.75); } .cta_button-12__content, .cta_button-13__content, .cta_button-14__content, .cta_button-15__content { position: relative; z-index: 10; } .cta_button-12__wrapper, .cta_button-13__wrapper, .cta_button-14__wrapper, .cta_button-15__wrapper { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 80px; } @media (max-width: 700px) { .cta_button-12__wrapper, .cta_button-13__wrapper, .cta_button-14__wrapper, .cta_button-15__wrapper { flex-direction: column; align-items: center; } } .cta_button-12__box, .cta_button-13__box, .cta_button-14__box, .cta_button-15__box { position: relative; padding: 50px 20px 25px; width: calc(50% - 30px); min-width: 280px; margin-right: 20px; background-color: white; border-radius: 10px; text-align: center; } .cta_button-12__box:last-child, .cta_button-13__box:last-child, .cta_button-14__box:last-child, .cta_button-15__box:last-child { margin-right: 0; } @media (max-width: 700px) { .cta_button-12__box, .cta_button-13__box, .cta_button-14__box, .cta_button-15__box { margin-bottom: 60px; margin-right: 0; } .cta_button-12__box:last-child, .cta_button-13__box:last-child, .cta_button-14__box:last-child, .cta_button-15__box:last-child { margin-bottom: 0; } } @media (max-width: 500px) { .cta_button-12__box, .cta_button-13__box, .cta_button-14__box, .cta_button-15__box { width: 100%; min-width: 100%; } } .cta_button-12__emoji, .cta_button-13__emoji, .cta_button-14__emoji, .cta_button-15__emoji { position: absolute; left: 0; right: 0; top: 0; margin: auto; transform: translateY(-50%); width: 40px; } .cta_button-12__text, .cta_button-13__text, .cta_button-14__text, .cta_button-15__text { margin-bottom: 40px; margin-left: auto; margin-right: auto; max-width: 320px; line-height: 1.4; } .cta_button-16, .cta_button-17, .cta_button-18, .cta_button-19 { padding: 70px 15px; background-color: #F6F6F6; } .cta_button-16__button_box, .cta_button-17__button_box, .cta_button-18__button_box, .cta_button-19__button_box { text-align: center; } .cta_button-16__wrapper, .cta_button-17__wrapper, .cta_button-18__wrapper, .cta_button-19__wrapper { padding: 40px 15px 40px; border-radius: 10px; border: 1px solid #eee; } .cta_button-20 { position: relative; z-index: 100; padding-bottom: 90px; } .cta_button-20__container { position: relative; z-index: 50; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-top: 140px; } @media (max-width: 1366px) { .cta_button-20__container { padding-top: 100px; } } @media (max-width: 700px) { .cta_button-20__container { padding-top: 70px; } } .cta_button-20__info { width: 50%; } @media (max-width: 1400px) { .cta_button-20__info { padding-left: 0; } } @media (max-width: 1000px) { .cta_button-20__info { width: 60%; } } @media (max-width: 760px) { .cta_button-20__info { width: 100%; margin-bottom: 100px; text-align: center; } } .cta_button-20__info_content { max-width: 400px; } @media (max-width: 760px) { .cta_button-20__info_content { margin-left: auto; margin-right: auto; } } .cta_button-20__text { max-width: 430px; } @media (max-width: 760px) { .cta_button-20__text { margin-left: auto; margin-right: auto; } } .cta_button-20__buttons_box { margin-top: 45px; } .cta_button-20__visal { position: relative; width: 50%; text-align: center; } @media (max-width: 1000px) { .cta_button-20__visal { width: 30%; } } @media (max-width: 760px) { .cta_button-20__visal { width: 90%; margin: auto auto 100px; } } @media (max-width: 500px) { .cta_button-20__visal { width: 60%; } } .cta_button-20__visal__wrapper { position: relative; } .cta_button-20__mockup--shift { position: absolute; left: -25%; right: 0; bottom: 0; top: 10%; width: 100%; margin: auto; } @media (max-width: 760px) { .cta_button-20__mockup--static { position: relative; left: 30px; } } @media (max-width: 1400px) { .cta_button-20__mockup { display: flex; justify-content: flex-end; flex-wrap: wrap; padding-right: 100px; } .cta_button-20__mockup .mockup { width: 250px; } } @media (max-width: 1366px) { .cta_button-20__mockup .mockup { width: 200px; } } @media (max-width: 1000px) { .cta_button-20__mockup { padding-right: 0; } } @media (max-width: 760px) { .cta_button-20__mockup { justify-content: center; } } @media (max-width: 760px) { .cta_button-20__buttons { justify-content: center; } .cta_button-20__buttons .rich_download_app__item { margin-right: 8px; margin-left: 8px; } } .cta_button-21, .cta_button-22, .cta_button-23, .cta_button-24 { padding: 70px 0 70px; display: flex; justify-content: center; } .cta_button-23 .buttons-set__item { padding-bottom: 0; } .cta_button-23 .buttons-set__item:last-child { padding-bottom: 0; } @media (max-width: 700px) { .cta_button-23 .buttons-set__item { display: block; padding-bottom: 14px; } } .cta_button-21__button_box, .cta_button-22__button_box, .cta_button-23__button_box, .cta_button-24__button_box { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; } @media (max-width: 500px) { .cta_button-21__button_box, .cta_button-22__button_box, .cta_button-23__button_box, .cta_button-24__button_box { flex-direction: column; } } .cta_button-21__text, .cta_button-22__text, .cta_button-23__text, .cta_button-24__text { padding-left: 20px; max-width: 250px; line-height: 1.4; } .cta_button-21__text .emoji, .cta_button-22__text .emoji, .cta_button-23__text .emoji, .cta_button-24__text .emoji { margin-left: 5px; margin-right: 5px; } @media (max-width: 500px) { .cta_button-21__text, .cta_button-22__text, .cta_button-23__text, .cta_button-24__text { padding-left: 0; margin-top: 15px; } } .cta_button-25 { padding: 70px 0; } .cta_button-25__title { margin-bottom: 25px; text-align: center; } .cta_button-25__subheading { margin-bottom: 20px; font-size: 12px; font-weight: 700; line-height: 1.4; text-transform: uppercase; color: #23273E; } .cta_button-25__heading { margin-top: 0; margin-bottom: 10px; } .cta_button-25__text { max-width: 500px; margin: 0 auto; font-size: 16px; line-height: 1.4; color: rgba(48, 48, 48, 0.8); } .cta_button-25__button_wrapper { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; margin-bottom: 100px; } @media (max-width: 500px) { .cta_button-25__button_wrapper { margin-bottom: 70px; } } .cta_button-25__tag { position: relative; } .cta_button-25__tag .tag { position: absolute; top: -10px; right: -50px; z-index: 2; } .cta_button-25__features { padding: 0; margin: 0; list-style: none; max-width: 750px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; } @media (max-width: 500px) { .cta_button-25__features { flex-direction: column; align-items: center; } } .cta_button-25__item { width: calc(100%/3 - 70px); padding-top: 15px; margin-right: 105px; margin-bottom: 30px; position: relative; } .cta_button-25__item:nth-child(3n) { margin-right: 0; } .cta_button-25__item:last-child { margin-right: 0; } .cta_button-25__item::before { content: ""; width: 60px; height: 3px; background-color: #23273E; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } @media (max-width: 800px) { .cta_button-25__item { width: calc(100%/3 - 30px); margin-right: 45px; } } @media (max-width: 500px) { .cta_button-25__item { width: 100%; max-width: 180px; margin-right: 0; margin-bottom: 50px; } .cta_button-25__item:last-child { margin-bottom: 0; } } .cta_button-25__top_title { margin-top: 0; margin-bottom: 5px; font-size: 20px; text-align: center; line-height: 1.4; } .cta_button-25__content { margin: 0; font-size: 14px; font-weight: 400; text-align: center; line-height: 1.4; opacity: 0.5; } .cta_button-26 { padding: 70px 0; background-color: #F6F6F6; } .cta_button-26__container { display: flex; align-items: center; justify-content: space-evenly; } .cta_button-26__container::after { display: none; } @media (max-width: 750px) { .cta_button-26__container { flex-direction: column; } } .cta_button-26__content { width: 100%; max-width: 425px; margin-right: 15px; } @media (max-width: 750px) { .cta_button-26__content { text-align: center; margin-bottom: 50px; margin-right: 0; } } .cta_button-26__heading { margin-top: 0; margin-bottom: 15px; } .cta_button-26__info { margin-top: 0; margin-bottom: 30px; font-size: 16px; line-height: 1.4; color: rgba(48, 48, 48, 0.8); } .cta_button-26__reasons { padding: 0; margin: 0; list-style: none; width: 100%; max-width: 290px; padding: 30px 35px; display: flex; flex-direction: column; background-color: white; border-radius: 10px; box-sizing: border-box; } .cta_button-26__reason { margin-bottom: 13px; display: flex; } .cta_button-26__reason:nth-child(3) { margin-bottom: 25px; } .cta_button-26__reason:last-child { margin-bottom: 0; } .cta_button-26__check { position: relative; top: 5px; vertical-align: top; height: 12px; margin-right: 10px; } .cta_button-26__text { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.4; } @keyframes heartbeat { 0% { transform: scale(0.75); } 20% { transform: scale(1); } 40% { transform: scale(0.75); } 60% { transform: scale(1); } 80% { transform: scale(0.75); } 100% { transform: scale(0.75); } } .cta_button-27 { padding: 70px 0; } .cta_button-27__container { padding-top: 45px; } .cta_button-27__card { padding: 88px 20px 40px 20px; text-align: center; border-radius: 10px; background-color: #303030; position: relative; } .cta_button-27__github_box { width: 113px; height: 113px; border: 4px solid #303030; border-radius: 50%; background-color: #303030; position: absolute; top: -44px; left: 50%; transform: translateX(-50%); } .cta_button-27__github { width: 100%; height: 100%; } .cta_button-27__heart { width: 20px; height: 20px; position: absolute; top: 80px; left: 43px; animation: heartbeat 2s infinite; -webkit-filter: contrast(0.5); filter: contrast(0.5); transition: -webkit-filter 0.25s ease, filter 0.25s ease; } .cta_button-27__heart:hover { -webkit-filter: contrast(1); filter: contrast(1); } .cta_button-27__text_box { max-width: 280px; margin: 0 auto; } .cta_button-27__title { margin-top: 0; margin-bottom: 15px; font-size: 20px; color: white; line-height: 1.4; } .cta_button-27__text { margin-top: 0; margin-bottom: 30px; font-size: 14px; color: white; line-height: 1.4; font-weight: 400; opacity: 0.4; } .cta_button-28 { padding: 70px 0; } .cta_button-28__container { position: relative; } .cta_button-28__grid { position: absolute; left: 0; right: 0; top: 0; max-width: 620px; width: 100%; margin: auto; z-index: -1; } .cta_button-28__card { max-width: 290px; padding: 35px 35px 40px 40px; margin: 0 auto; border-radius: 10px; background-color: #051128; position: relative; } .cta_button-28__tools { max-width: 47px; max-height: 60px; position: absolute; top: -33px; left: 50%; transform: translateX(-50%); } .cta_button-28__title { margin-top: 0; margin-bottom: 30px; font-size: 20px; font-weight: 700; text-align: center; color: #F6F6F6; } .cta_button-28__features { padding: 0; margin: 0; list-style: none; margin-bottom: 40px; } .cta_button-28__feature { margin-bottom: 15px; display: flex; } .cta_button-28__feature:nth-child(2n) { margin-bottom: 30px; } .cta_button-28__feature:last-child { margin-bottom: 0; } .cta_button-28__check { position: relative; top: 5px; vertical-align: top; height: 12px; margin-right: 10px; } .cta_button-28__text { margin: 0; font-size: 16px; font-weight: 400; color: #F6F6F6; } .cta_button-28__button { text-align: center; } .cta_button-29 { padding: 70px 0; } .cta_button-29__card { width: 100%; max-width: 820px; padding-top: 40px; padding-bottom: 25px; margin: 0 auto; border: 1px solid #F6F6F6; border-radius: 10px; } .cta_button-29__heading { margin-top: 0; margin-bottom: 40px; padding-left: 15px; padding-right: 15px; color: #20313C; text-align: center; } .cta_button-29__list { padding: 0; margin: 0; list-style: none; padding: 0 30px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } @media (max-width: 660px) { .cta_button-29__list { padding: 0 40px; } } @media (max-width: 550px) { .cta_button-29__list { flex-direction: column; } } .cta_button-29__item { margin-right: 10px; margin-left: 10px; margin-bottom: 20px; } @media (max-width: 660px) { .cta_button-29__item:last-child { margin-bottom: 0; } } @media (max-width: 550px) { .cta_button-29__item { width: 100%; max-width: 200px; margin-right: 0; margin-left: 0; } } .cta_button-29__logo { max-width: 20px; max-height: 15px; margin-right: 12px; } .cta_button-29__link { width: 100%; height: 100%; padding: 15px; font-size: 14px; font-weight: 700; color: white; text-decoration: none; display: flex; align-items: center; box-sizing: border-box; border-radius: 4px; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .cta_button-29__link:hover { transform: translateY(-2px); box-shadow: 0 2px 8px 0 rgba(136, 144, 195, 0.22), 0 8px 15px 0 rgba(37, 44, 97, 0.17); } .cta_button-29__link:visited { color: white; } .cta_button-30 { padding: 70px 0; } .cta_button-30__list { padding: 0; margin: 0; list-style: none; width: 100%; max-width: 950px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } @media (max-width: 750px) { .cta_button-30__list { flex-direction: column; } } .cta_button-30__item { width: calc(100%/2 - 15px); padding: 28px 38px 25px 40px; margin-right: 30px; margin-bottom: 30px; border-radius: 10px; border: 1px solid #F6F6F6; box-sizing: border-box; } .cta_button-30__item:nth-child(2n) { margin-right: 0; } .cta_button-30__item:last-child { margin-right: 0; } .cta_button-30__item .feature__title_text { font-size: 20px; text-transform: none; } .cta_button-30__item .feature__icon { margin-right: 30px; } @media (max-width: 500px) { .cta_button-30__item .feature__icon { margin-right: 15px; } } .cta_button-30__item .feature__content { padding-left: 70px; margin-bottom: 25px; color: rgba(48, 48, 48, 0.8); } @media (max-width: 750px) { .cta_button-30__item .feature__content { padding-left: 0; } } .cta_button-30__item .button { margin-left: 70px; } @media (max-width: 750px) { .cta_button-30__item .button { margin-left: 0; display: block; } } @media (max-width: 750px) { .cta_button-30__item { width: 100%; max-width: 450px; margin-right: 0; } } .cta_button-31 { padding: 70px 0; } .cta_button-31__card { padding: 30px; display: flex; justify-content: space-between; align-items: center; border-radius: 4px; background-color: #F6F6F6; } @media (max-width: 750px) { .cta_button-31__card { padding: 25px 20px 40px; flex-direction: column; } } .cta_button-31__heading { max-width: 48%; margin: 0; font-size: 20px; color: #23273E; } @media (max-width: 750px) { .cta_button-31__heading { max-width: 400px; margin: 0 auto; margin-bottom: 25px; text-align: center; } } .cta_button-31__list { padding: 0; margin: 0; list-style: none; width: 50%; display: flex; justify-content: center; flex-wrap: wrap; } @media (max-width: 900px) { .cta_button-31__list { flex-direction: column; align-items: center; } } @media (max-width: 750px) { .cta_button-31__list { width: 70%; flex-direction: row; } } @media (max-width: 650px) { .cta_button-31__list { width: 100%; flex-direction: column; } } .cta_button-31__item { width: calc(100%/2 - 10px); margin-right: 20px; margin-top: 20px; } .cta_button-31__item:nth-child(-n+2) { margin-top: 0; } .cta_button-31__item:nth-child(2n) { margin-right: 0; } .cta_button-31__item:last-child { margin-right: 0; } @media (max-width: 900px) { .cta_button-31__item { width: 100%; max-width: 200px; margin-right: 0; margin-top: 0; margin-bottom: 20px; } .cta_button-31__item:last-child { margin-bottom: 0; } } @media (max-width: 750px) { .cta_button-31__item { width: calc(100%/2 - 10px); max-width: unset; margin-bottom: 0; margin-right: 20px; margin-top: 20px; } .cta_button-31__item:nth-child(-n+2) { margin-top: 0; } .cta_button-31__item:nth-child(2n) { margin-right: 0; } .cta_button-31__item:last-child { margin-right: 0; } } @media (max-width: 650px) { .cta_button-31__item { width: 100%; max-width: 200px; margin-right: 0; margin-top: 0; margin-bottom: 20px; } .cta_button-31__item:last-child { margin-bottom: 0; } } .cta_button-31__logo { max-width: 20px; max-height: 15px; margin-right: 12px; } .cta_button-31__link { width: 100%; height: 100%; padding: 15px; font-size: 14px; font-weight: 700; color: white; text-decoration: none; display: flex; align-items: center; box-sizing: border-box; border-radius: 4px; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .cta_button-31__link:hover { transform: translateY(-2px); box-shadow: 0 2px 8px 0 rgba(136, 144, 195, 0.22), 0 8px 15px 0 rgba(37, 44, 97, 0.17); } .cta_button-31__link:visited { color: white; } .contact-01 { padding: 70px 0 70px; text-align: center; } .contact-01__text_box { margin-bottom: 30px; } .contact-01__list { padding: 0; margin: 0; list-style: none; } .contact-01__list_item { margin-bottom: 20px; } .contact-01__list_item:last-child { margin-bottom: 0; } .contact-01__link { color: #23273E; } .contact-01__map_box { margin-top: 80px; } .contact-01__map { display: inline-block; position: relative; overflow: hidden; width: 250px; height: 150px; text-decoration: none; border-radius: 10px; box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity 0.25s ease, transform 0.25s ease; } .contact-01__map:hover { transform: translateY(-5px); } .contact-01__map:before { content: ""; opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-color: rgba(31, 44, 75, 0.7); background-size: 24px; background-position: center; background-repeat: no-repeat; background-image: url("../img/icons/view--white.svg"); transition: opacity 0.2s ease; } .contact-01__map:hover:before { opacity: 1; } .contact-02 { padding: 40px 0; } .contact-02__list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; } @media (max-width: 768px) { .contact-02__list { flex-direction: column; align-items: center; } } .contact-02__list_item { width: 30%; } @media (max-width: 768px) { .contact-02__list_item { margin-bottom: 40px; width: 50%; } .contact-02__list_item:last-child { margin-bottom: 0; } } .contact-02__item_title { margin-bottom: 7px; text-transform: uppercase; font-size: 16px; } .contact-02__social { margin-top: 10px; } .contact-02__social .social-buttons__link { opacity: 0.4; transition: opacity 0.25s ease, transform 0.25s ease; } .contact-02__social .social-buttons__link:hover { opacity: 0.5; transform: translateY(-2px); } .contact-02__link { text-decoration: none; } .testimonials-01 { padding: 10px 0 10px; text-align: center; } @media (max-width: 800px) { .testimonials-01 .slider__arrow { display: none; } } @media (max-width: 800px) { .testimonials-01 .slick-dots { bottom: -20px; } } .testimonials-01 .slick-slide { padding: 0 15px; } .testimonials-01 .slider__box:before { position: absolute; z-index: 100; top: 0; bottom: 0; left: 0; width: 15px; background-image: linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0) 100%); } @media (max-width: 800px) { .testimonials-01 .slider__box:before { content: ""; } } .testimonials-01 .slider__box:after { position: absolute; z-index: 100; top: 0; bottom: 0; right: 0; width: 15px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 100%); } @media (max-width: 800px) { .testimonials-01 .slider__box:after { content: ""; } } .testimonials-01__container { display: flex; max-width: 90%; justify-content: center; } @media (max-width: 800px) { .testimonials-01__container { display: block; padding-left: 0; padding-right: 0; } } .testimonials-01__item { display: inline-block; position: relative; padding: 35px 30px 25px; max-width: 580px; margin-bottom: 20px; margin-top: 20px; margin-right: 20px; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; text-align: left; } .testimonials-01__logo { max-height: 30px; } .testimonials-01__logo--round { border-radius: 50%; box-shadow: 0 5px 15px 0 rgba(37, 44, 97, 0.15); } .testimonials-01__text { color: #636363; line-height: 1.6; } .testimonials-01__author { text-align: right; color: #23273E; font-size: 14px; line-height: 1.4; } .testimonials-02 { padding: 70px 0; } .testimonials-02__wrapper { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; } @media (max-width: 950px) { .testimonials-02__wrapper { flex-direction: column; align-items: center; } } .testimonials-02__item { width: calc(100% / 2 - 40px); max-width: 580px; padding: 35px 30px 25px; margin-right: 40px; margin-bottom: 40px; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; box-sizing: border-box; text-align: left; } .testimonials-02__item:nth-child(2n) { margin-right: 0; } .testimonials-02__item:last-child { margin-bottom: 0; } @media (max-width: 950px) { .testimonials-02__item { width: 100%; margin-right: 0; } } @media (max-width: 650px) { .testimonials-02__item { max-width: 400px; } } @media (max-width: 450px) { .testimonials-02__item { max-width: 300px; } } .testimonials-02__logo { max-height: 30px; } .testimonials-02__text { padding-right: 60px; line-height: 1.6; color: #636363; } @media (max-width: 800px) { .testimonials-02__text { font-size: 14px; } } @media (max-width: 650px) { .testimonials-02__text { max-width: 400px; padding-right: 0; } } @media (max-width: 450px) { .testimonials-02__text { max-width: 300px; } } .testimonials-02__author { text-align: right; color: #23273E; font-size: 14px; line-height: 1.4; } .testimonials-03 { padding: 70px 0; } .testimonials-03__wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; } @media (max-width: 850px) { .testimonials-03__wrapper { align-items: center; } } .testimonials-03__item { width: calc(100%/3 - 27px); margin-right: 40px; margin-bottom: 40px; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; display: flex; flex-direction: column; justify-content: center; } .testimonials-03__item:nth-child(3n) { margin-right: 0; } .testimonials-03__item:last-child { margin-right: 0; margin-bottom: 0; } .testimonials-03__item:nth-last-child(-n + 2) { margin-bottom: 0; } .testimonials-03__item .social-buttons { margin-left: auto; } .testimonials-03__item .social-buttons__item { margin-bottom: 0; } .testimonials-03__item .social-buttons__icon { opacity: 0.2; transition: all 0.2s ease; } .testimonials-03__item .social-buttons__item:hover .social-buttons__icon { opacity: 0.6; transform: translateY(-2px); } @media (max-width: 850px) { .testimonials-03__item { width: calc(100%/2 - 20px); max-width: 350px; margin-right: 40px; margin-bottom: 40px; } .testimonials-03__item:nth-child(2n) { margin-right: 0; } .testimonials-03__item:nth-child(3n) { margin-right: 40px; } .testimonials-03__item:nth-last-child(-n + 2) { margin-bottom: 40px; } .testimonials-03__item:last-child { margin-right: 0; margin-bottom: 0; } } @media (max-width: 550px) { .testimonials-03__item { width: 100%; max-width: 300px; margin-right: 0; } .testimonials-03__item:nth-child(3n + 3) { margin-right: 0; } } .testimonial-03__name_box { padding: 15px 20px; border-bottom: 1px solid rgba(151, 151, 151, 0.2); display: flex; align-items: center; } .testimonials-03__person_link { color: #23273E; line-height: 1.4; text-decoration: none; } .testimonials-03__person_image { max-width: 30px; margin-right: 10px; border-radius: 50%; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); } .testimonials-03__content { padding: 25px; } .testimonials-03__text { margin: 0; line-height: 1.4; } .testimonials-04 { padding: 70px 0; } .testimonials-04__wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } @media (max-width: 900px) { .testimonials-04__wrapper { flex-direction: column; } } .testimonials-04__item { width: calc(100%/2 - 20px); max-width: 580px; padding: 25px 30px 25px; margin-bottom: 40px; margin-right: 40px; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; text-align: left; } .testimonials-04__item:nth-child(2n) { margin-right: 0; } @media (max-width: 900px) { .testimonials-04__item { width: 100%; margin-right: 0; } } .testimonials-04__name_box { margin-bottom: 20px; display: flex; align-items: center; justify-content: flex-start; } .testimonials-04__person_image { max-height: 50px; margin-right: 25px; border-radius: 50%; box-shadow: 0 5px 15px 0 rgba(37, 44, 97, 0.15); } .testimonials-04__person_name { margin-top: 0; margin-bottom: 1px; font-size: 14px; line-height: 1.4; color: #20313C; } .testimonials-04__job { margin: 0; font-size: 14px; line-height: 1.4; color: #20313C; font-weight: 400; opacity: 0.6; } .testimonial-04__text { margin-top: 0; margin-bottom: 40px; } .testimonials-04__stars_list { padding: 0; margin: 0; list-style: none; display: flex; } .testimonials-04__star_box { width: 20px; height: 20px; margin-right: 10px; } .testimonials-04__star_box:last-child { margin-right: 0; } .testimonials-04__star { max-width: 20px; height: 20px; } .testimonials-05 { padding: 70px 0; } .testimonials-05__container { padding-top: 65px; position: relative; display: flex; justify-content: flex-end; } @media (max-width: 500px) { .testimonials-05__container { justify-content: center; } } .testimonials-05__emoji { max-width: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .testimonials-05__card { width: 77%; max-width: 400px; margin: 0 auto; } @media (max-width: 500px) { .testimonials-05__card { width: 100%; } } .testimonials-05__cloud { width: 100%; padding: 25px 40px; margin-bottom: 25px; box-sizing: border-box; border-radius: 20px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: #303030; position: relative; } .testimonials-05__cloud::after { content: ""; width: 90px; height: 32px; background-image: url("../img/other/cloud_arrow.svg"); background-size: cover; background-repeat: no-repeat; transform: translateX(-50%); position: absolute; left: 50%; bottom: -25px; } @media (max-width: 500px) { .testimonials-05__cloud { padding: 25px; } } .testimonials-05__blue_box { position: relative; } .testimonials-05__blue_box::before { content: ""; width: 100%; height: 100%; display: block; background-color: #23273E; transform: rotate(-1deg); position: absolute; top: 0; left: 0; z-index: -1; } .testimonials-05__text { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.4; color: white; position: relative; z-index: 2; } .testimonials-05__link { color: white; } .testimonials-05__link:visited { color: white; } .testimonials-05__person_box { width: 100%; padding-right: 30px; display: flex; justify-content: flex-end; align-items: center; box-sizing: border-box; } @media (max-width: 500px) { .testimonials-05__person_box { justify-content: center; } } .testimonials-05__person_image { max-width: 70px; max-height: 70px; margin-right: 20px; border-radius: 50%; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); } .testimonials-05__name { margin-top: 0; margin-bottom: 5px; font-size: 16px; line-height: 1.4; color: #20313C; } .testimonials-05__occupation { margin: 0; font-size: 12px; line-height: 1.4; color: #20313C; opacity: 0.6; } .testimonials-06 { padding: 70px 0; background-color: #23273E; position: relative; overflow: hidden; } .testimonials-06 .heading, .testimonials-06 .text--04__big_text { margin-top: 0; margin-bottom: 40px; text-align: center; color: white; } .testimonials-06__container { position: relative; z-index: 2; } .testimonials-06__heart { position: absolute; } .testimonials-06__heart--small { top: -30px; left: -44px; } .testimonials-06__heart--large { top: 125px; right: -190px; } @media (max-width: 1000px) { .testimonials-06__heart--large { top: 50%; } } .testimonials-06__heart--medium { display: none; } @media (max-width: 1000px) { .testimonials-06__heart--medium { display: block; bottom: -100px; left: 5%; } } .testimonials-06__list { padding: 0; margin: 0; list-style: none; padding-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; } @media (max-width: 1000px) { .testimonials-06__list { flex-direction: column; align-items: center; } } .testimonials-06__item { width: calc(100%/3 - 40px); padding-top: 40px; margin-right: 60px; display: flex; flex-direction: column; } .testimonials-06__item:last-child { margin-right: 0; } .testimonials-06__item:nth-child(2) { padding-top: 0; } @media (max-width: 1000px) { .testimonials-06__item { width: calc(100%/2 - 30px); padding-top: 0; margin-bottom: 40px; margin-right: 0; } .testimonials-06__item:nth-child(2) { margin-right: 0; } .testimonials-06__item:last-child { margin-bottom: 0; } } @media (max-width: 750px) { .testimonials-06__item { width: 100%; max-width: 450px; margin-right: 0; } } .testimonials-06__card { margin-bottom: 50px; } .testimonials-06__card:last-child { margin-bottom: 0; } .testimonials-06__cloud { padding: 20px 25px; margin-bottom: 20px; border-radius: 4px; background-color: white; position: relative; } .testimonials-06__cloud::before { content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid white; position: absolute; bottom: -8px; left: 27px; } .testimonials-06__text { margin: 0; font-size: 16px; font-weight: 400; color: #20313C; } .testimonials-06__link { position: absolute; bottom: 10px; right: 10px; } .testimonials-06__twitter { max-width: 17px; max-height: 14px; } .testimonials-06__person_box { padding-left: 15px; display: flex; align-items: center; } .testimonials-06__person_image { max-width: 40px; max-height: 40px; margin-right: 15px; border-radius: 50%; } .testimonials-06__name { margin-top: 0; margin-bottom: 5px; font-size: 16px; line-height: 1.4; color: white; } .testimonials-06__occupation { margin: 0; font-size: 12px; line-height: 1.4; font-weight: 400; color: white; opacity: 0.6; } .footer-01 { } .footer-01__wrapper { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 0px 0 20px; } .footer-01__logo_link { display: block; transition: opacity 0.25s ease, transform 0.25s ease; } .footer-01__logo_link:hover { opacity: 0.8; } @media (max-width: 750px) { .footer-01__logo_link { margin-bottom: 40px; } } .footer-01__logo { max-height: 30px; max-width: 100px; } .footer-01__list { padding: 0; margin: 0; list-style: none; } @media (max-width: 750px) { .footer-01__list { margin-bottom: 40px; } .footer-01__list:last-child { margin-bottom: 0; } } .footer-01__item { margin-bottom: 10px; } .footer-01__link { text-decoration: none; } .footer-01__link:hover { color: #041ddf; } .footer-01__link--black { color: #303030; } .footer-01__link--black:hover { color: #636363; } .footer-02 { background-color: #303030; padding: 40px 0; } .footer-02 .social-buttons__link { opacity: 0.5; } .footer-02 .social-buttons__link:hover { opacity: 1; } .footer-02 .social-buttons__list { justify-content: flex-end; } @media (max-width: 750px) { .footer-02 .social-buttons__list { justify-content: flex-start; } } .footer-02__wrapper { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } @media (max-width: 750px) { .footer-02__wrapper { display: block; } } .footer-02__list { padding: 0; margin: 0; list-style: none; } .footer-02__item { margin-bottom: 10px; } .footer-02__text { color: rgba(255, 255, 255, 0.5); line-height: 1.4; } @media (max-width: 750px) { .footer-02__text { margin-bottom: 20px; } } .footer-02__link { text-decoration: none; color: inherit; } .footer-02__link:hover { color: white; } .footer-03 { overflow: hidden; position: relative; padding-top: 70px; padding-bottom: 70px; } .footer-03__social { margin-bottom: 46px; } .footer-03__social_list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; } .footer-03__social_item { margin: 0 5px 5px; } .footer-03__social_link { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; flex-direction: column; padding: 10px; border-radius: 4px; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .footer-03__social_link:hover, .footer-03__social_link:focus { background-color: #DFEAFE; } .footer-03__social_link:hover .footer-03__social_icon, .footer-03__social_link:focus .footer-03__social_icon { opacity: 1; } .footer-03__social_link:hover .footer-03__social_text, .footer-03__social_link:focus .footer-03__social_text { color: rgba(48, 48, 48, 0.7); } .footer-03__social_icon { height: 16px; opacity: 0.8; transition: opacity 0.2s ease; } .footer-03__social_text { display: block; margin-top: 12px; font-size: 14px; color: rgba(48, 48, 48, 0.5); transition: color 0.2s ease; } .footer-03__pages { margin-bottom: 38px; } .footer-03__pages_list { padding: 0; margin: 0; list-style: none; text-align: center; } .footer-03__pages_item { display: inline-block; position: relative; margin: 0 20px 10px; } @media (max-width: 600px) { .footer-03__pages_item { margin: 0 10px 10px; } } .footer-03__pages_item:after { content: ""; position: absolute; top: 50%; transform: translateY(-50%) translateX(50%); right: -20px; height: 4px; width: 4px; border-radius: 50%; background-color: #23273E; } @media (max-width: 600px) { .footer-03__pages_item:after { content: none; } } .footer-03__pages_item:last-child:after { content: none; } .footer-03__pages_link { display: block; text-decoration: none; font-size: 12px; color: rgba(48, 48, 48, 0.8); font-weight: 700; text-transform: uppercase; transition: color 0.2s ease; } .footer-03__pages_link:hover { color: #23273E; } .footer-03__text_box { text-align: center; } .footer-03__text { margin-bottom: 5px; color: rgba(48, 48, 48, 0.2); font-size: 14px; } .footer-03__text:last-child { margin-bottom: 0; } .footer-03__link { text-decoration: none; color: inherit; transition: color 0.2s ease; } .footer-03__link:hover { color: rgba(48, 48, 48, 0.5); } .footer-03__grid { position: absolute; left: 0; right: 0; top: 0; max-width: 620px; width: 100%; margin: auto; z-index: -1; } .footer-04 { padding-top: 70px; background-color: #F0F4F7; } .footer-04__top_wrapper { display: flex; justify-content: space-between; flex-wrap: wrap; padding-left: 15px; padding-right: 15px; border-bottom: 1px solid #D8DDE6; } @media (max-width: 1100px) { .footer-04__top_wrapper { justify-content: flex-start; } } .footer-04__col { width: 20%; min-width: 200px; padding-right: 25px; margin-bottom: 50px; } .footer-04__title { margin-top: 0; margin-bottom: 20px; } .footer-04__logo_link { display: inline-block; text-decoration: none; transition: opacity 0.25s ease; } .footer-04__logo_link:hover { opacity: 0.8; } .footer-04__logo { max-height: 30px; margin-bottom: 10px; } .footer-04__info { font-size: 14px; line-height: 1.4; color: rgba(48, 48, 48, 0.3); } .footer-04__list { padding: 0; margin: 0; list-style: none; } .footer-04__item { margin-bottom: 12px; } .footer-04__item:last-child { margin-bottom: 0; } .footer-04__link { position: relative; font-size: 14px; text-decoration: none; color: #54698D; transition: color 0.2s ease; } .footer-04__link:hover { color: #23273E; } .footer-04__bottom_wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 34px 15px; } .footer-04__bottom_links { padding: 0; margin: 0; list-style: none; } .footer-04__bottom_links_item { display: inline-block; margin-left: 7px; margin-bottom: 5px; margin-top: 5px; } .footer-04__bottom_link { text-decoration: none; font-size: 12px; color: rgba(48, 48, 48, 0.3); transition: color 0.2s ease; } .footer-04__bottom_link:hover { color: rgba(48, 48, 48, 0.5); } .text--01 { padding: 70px 0 70px; } .text--01__box { position: relative; border-radius: 10px; background-color: #23273E; padding: 20px 35px 30px; } @media (max-width: 500px) { .text--01__box { padding-left: 15px; padding-right: 15px; } } .text--01__emoji { position: absolute; left: 0; right: 0; margin: auto; top: 0; transform: translateY(-50%); text-align: center; } .text--01__content { font-size: 20px; } @media (max-width: 500px) { .text--01__content { font-size: 16px; } } .text--01__link_box { margin-top: 25px; } .text--02 { overflow: hidden; padding: 70px 0 100px; background-color: #23273E; } .text--02__box { position: relative; } .text--02__content_box { padding: 60px 90px 65px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; } .text--02__content_box--top { position: relative; z-index: 10; } .text--02__content_box--bottom { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; top: 0; margin: auto; transform: rotate(-3deg); box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; } @media (max-width: 700px) { .text--02__content_box { padding-left: 20px; padding-right: 20px; } } .text--02__img { position: absolute; left: 0; right: 0; top: 0; margin: auto; transform: translateY(-50%); width: 60px; } .text--02__link_box { margin-top: 20px; } .text--03 { padding: 70px 0 70px; } .text--03__wrapper { display: flex; justify-content: space-between; flex-wrap: wrap; } @media (max-width: 700px) { .text--03__wrapper { justify-content: center; flex-direction: column; } } .text--03__left { width: 45%; } @media (max-width: 700px) { .text--03__left { width: 100%; margin-bottom: 40px; } } .text--03__big_text { font-size: 32px; line-height: 1.4; } @media (max-width: 700px) { .text--03__big_text { font-size: 20px; } } .text--03__right { width: 45%; } .text--03__right p:first-of-type { margin-top: 0; } @media (max-width: 700px) { .text--03__right { width: 100%; } } .text--04 { padding: 70px 0 70px; } .text--04__big_text { line-height: 1.3; text-align: center; } .text--04__big_text .emoji { margin-left: 0.3em; margin-right: 0.3em; } .text--05 { padding: 70px 0 70px; } .text--05__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; } @media (max-width: 900px) { .text--05__wrapper { justify-content: center; flex-wrap: wrap; flex-direction: column; } } .text--05__text_box { width: 40%; } @media (max-width: 900px) { .text--05__text_box { margin-bottom: 40px; width: 100%; max-width: 280px; } } .text--06__img_box { max-width: 50%; } @media (max-width: 900px) { .text--06__img_box { max-width: 100%; } } .text--05__img { width: 100%; } .text--06 { padding: 70px 0 70px; } .text--06__list { padding: 0; margin: 0; list-style: none; } .text--06__item { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 40px; } .text--06__item:last-child { margin-bottom: 0; } @media (max-width: 450px) { .text--06__item { flex-direction: column; text-align: center; } } .text--06__img { width: 80px; margin-right: 20px; } @media (max-width: 450px) { .text--06__img { margin-right: 0; } } .text--06__text { width: calc(100% - 110px); } @media (max-width: 450px) { .text--06__text { width: 100%; } } .text--07 { padding: 70px 0 70px; } .text--08 { padding: 70px 0 70px; } .text--08 .emoji { margin-left: 0.3em; margin-right: 0.3em; } .text--08__heading { margin-top: 40px; } .text--08__heading:first-of-type { margin-top: 0; } .code-01 { padding: 70px 0 40px; } .code-01__title_box { text-align: center; } .code-01__container { margin-top: 40px; -webkit-filter: invert(0.85); filter: invert(0.85); } .code-02 { padding: 70px 0 40px; } .code-02__title_box { text-align: center; } .code-02__wrapper { display: flex; justify-content: space-evenly; flex-wrap: wrap; } @media (max-width: 1000px) { .code-02__wrapper { flex-direction: column; align-items: center; } } .code-02__block { max-width: 600px; width: 100%; } @media (max-width: 1000px) { .code-02__block { margin-bottom: 40px; } } .code-02__block_box { overflow: hidden; position: relative; margin-bottom: 15px; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); } .code-02__code { padding: 25px 70px 30px 25px; } .code-02__block_wrapper { overflow: auto; } .code-02__button_box { display: flex; justify-content: flex-end; } @media (max-width: 1000px) { .code-02__button_box { justify-content: center; } } .code-02__info { max-width: 350px; width: 100%; padding-left: 15px; } @media (max-width: 1000px) { .code-02__info { text-align: center; } } .code-02__info_prefix { display: inline-block; margin-right: 7px; color: #23273E; } .code-02__info_prefix .emoji { margin-left: 0.2em; margin-right: 0.2em; font-size: 1.2em; } .code-02__info_text { line-height: 1.4; } .links-01 { padding: 70px 0 70px; } .links-01__title_box { position: relative; text-align: center; } .links-01__list { padding: 0; margin: 0; list-style: none; margin-top: 40px; } .links-01__item { margin-bottom: 20px; } .links-01__item:last-child { margin-bottom: 0; } .links-01__link { position: relative; display: block; overflow: hidden; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); background-color: white; text-decoration: none; cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; } .links-01__link:hover, .links-01__link:focus { transform: translateY(-2px); box-shadow: 0 2px 8px 0 rgba(136, 144, 195, 0.22), 0 8px 15px 0 rgba(37, 44, 97, 0.17); } .links-01__link:hover .links-01__pseudo-button, .links-01__link:focus .links-01__pseudo-button { transform: translateX(3px) translateY(-50%); } .links-01__link:active { transform: translateY(-1px); box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); outline: none; } .links-01__img_box { position: absolute; left: 0; top: 0; width: 30%; height: 100%; } .links-01__text_box { margin-left: 30%; padding: 30px 60px 30px 30px; } .links-01__pseudo-button { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: inline-flex; align-content: center; justify-content: center; background-color: #E9F1FF; border-radius: 50%; width: 40px; height: 40px; transition: transform 0.2s ease; } .links-01__pseudo-button svg * { fill: #23273E; } .links-01__pseudo-button .icon { width: 16px; height: 100%; display: flex; justify-content: center; align-items: center; } .links-01__pseudo-button .icon svg { width: 100%; height: 100%; } .links-01__pseudo-button .icon svg * { transition: fill 0.2s ease; } .links-01__text_title { margin-bottom: 5px; color: #303030; line-height: 1.4; font-weight: 700; } .links-01__text_date { color: #b9c2d2; font-size: 14px; } .links-01__button_box { margin-top: 60px; text-align: center; } .links-01__img_badge { position: absolute; top: 0; left: 0; } .links-02 { padding: 70px 0 70px; } .links-02__list { padding: 0; margin: 0; list-style: none; padding: 5px 0 15px 15px; margin-bottom: 40px; border-left: 1px solid #D8DDE6; } .links-02__list:last-child { margin-bottom: 0; } .links-02__item { margin-bottom: 25px; } .links-02__item:last-child { margin-bottom: 0; } .links-02__link { position: relative; text-decoration: none; } .links-03 { padding: 70px 0 40px; } .links-03__title_box { position: relative; text-align: center; } .links-03__list { padding: 0; margin: 0; list-style: none; margin-top: 70px; } .links-03__item { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 20px 15px; border-top: 1px solid #D8DDE6; transition: background-color 0.2s ease; } .links-03__item:last-child { border-bottom: 1px solid #D8DDE6; } .links-03__item:hover { background-color: rgba(246, 246, 246, 0.4); } @media (max-width: 750px) { .links-03__item { display: block; text-align: center; } } .links-03__title { font-weight: 700; } @media (max-width: 750px) { .links-03__title { margin-bottom: 10px; } } .links-03__link { text-decoration: none; } .links-03__location { display: inline-block; vertical-align: middle; color: #7d7d7d; } .links-03__icon { position: relative; top: 1.5px; margin-right: 8px; } .links-03__button_box { display: inline-block; vertical-align: middle; margin-left: 35px; } @media (max-width: 750px) { .links-03__button_box { display: block; margin-left: 0; margin-top: 30px; } } .links-04 { padding: 70px 0 70px; } .links-04__title_box { margin-bottom: 40px; text-align: center; } .links-04__list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; } .links-04__item { position: relative; width: calc(50% - 15px); margin-bottom: 30px; padding: 10px 60px 50px 20px; border-radius: 10px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); } @media (max-width: 800px) { .links-04__item { padding-right: 20px; } } @media (max-width: 700px) { .links-04__item { width: 100%; } } .links-04__text { opacity: 0.8; margin-bottom: 10px; line-height: 1.4; } .links-04__link { position: absolute; bottom: 20px; left: 20px; text-decoration: none; } .links-05 { padding: 70px 0 70px; } .links-05__list_box { position: relative; padding-left: 60px; margin-right: 80px; margin-bottom: 40px; } .links-05__list_box:last-child { margin-right: 0; } @media (max-width: 600px) { .links-05__list_box { margin-right: 0; padding-left: 0; } } .links-05__wrapper { display: flex; justify-content: space-around; flex-wrap: wrap; } @media (max-width: 600px) { .links-05__wrapper { flex-direction: column; align-items: center; text-align: center; } } .links-05__list { padding: 0; margin: 0; list-style: none; padding: 5px 0 15px 0px; margin-bottom: 40px; } .links-05__list:last-child { margin-bottom: 0; } .links-05__item { margin-bottom: 15px; } .links-05__item:last-child { margin-bottom: 0; } .links-05__list_img { position: absolute; left: 0; top: 0; height: 40px; } @media (max-width: 600px) { .links-05__list_img { position: static; } } .links-05__link { position: relative; text-decoration: none; } .links-06 { padding: 30px 0 70px; background-color: #F6F6F6; } .links-06__heading { margin-bottom: 50px; text-align: center; } .links-06__list { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .links-06__list--bigger .links-06__article { width: calc(100%/2 - 15px); margin-right: 30px; margin-bottom: 30px; padding-right: 40px; } .links-06__list--bigger .links-06__article:nth-child(2n) { margin-right: 0; } .links-06__list--bigger .links-06__article:last-child { margin-right: 0; } @media (max-width: 850px) { .links-06__list--bigger .links-06__article { width: 100%; max-width: 550px; margin-right: 0; } } .links-06__list--bigger .links-06__text { margin-bottom: 40px; } @media (max-width: 550px) { .links-06__list--bigger .links-06__text { margin-bottom: 0; } } .links-06__list--smaller .links-06__article { width: calc(100%/3 - 10px); margin-right: 15px; margin-bottom: 35px; border: 1px solid rgba(151, 151, 151, 0.19); } .links-06__list--smaller .links-06__article:nth-child(3n) { margin-right: 0; } .links-06__list--smaller .links-06__article--gray-bg { border: none; } @media (max-width: 850px) { .links-06__list--smaller .links-06__article { width: calc(100%/2 - 15px); margin-right: 30px; } .links-06__list--smaller .links-06__article:nth-child(2n) { margin-right: 0; } .links-06__list--smaller .links-06__article:nth-child(3n) { margin-right: 30px; } .links-06__list--smaller .links-06__article:last-child { margin-right: 0; } } @media (max-width: 550px) { .links-06__list--smaller .links-06__article { width: 100%; margin-right: 0; } .links-06__list--smaller .links-06__article:nth-child(3n) { margin-right: 0; } } .links-06__article { padding: 30px 25px; border-radius: 10px; box-sizing: border-box; background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; } .links-06__article--white-bg { background-color: white; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2); } .links-06__article--transparent-bg { border: 1px solid rgba(151, 151, 151, 0.19); } .links-06__article--gray-bg { background-color: rgba(216, 221, 230, 0.7); border: none; } .links-06__article--image-bg { background-color: #23273E; } .links-06__article--image-bg .feature__link { color: white; text-decoration: underline; } .links-06__article--image-bg .icon * { fill: white; } .links-06__logo { max-width: 45px; max-height: 45px; margin-bottom: 15px; border-radius: 50%; } .links-06__text { font-size: 16px; line-height: 1.4; } .links-06__title { margin-top: 0; margin-bottom: 10px; font-size: 20px; font-weight: 700; } .links-06__link { text-decoration: none; } .faq-01 { padding: 70px 0 40px; } .faq-01__title_box { text-align: center; } .faq-01__list { padding: 0; margin: 0; list-style: none; margin-top: 30px; } .faq-01__question { position: relative; overflow: hidden; width: 100%; margin-bottom: 10px; padding: 20px 15px 20px 15px; border: 2px solid #D8DDE6; border-radius: 4px; text-align: left; color: #23273E; cursor: pointer; font-weight: 700; line-height: 1.4; letter-spacing: 0.01em; transition: border-color 0.25s ease, color 0.25s ease; } .faq-01__question:hover { border-color: #23273E; } .faq-01__question_text { position: relative; padding-right: 35px; } .faq-01__question_text:before { content: ""; position: absolute; right: 10px; bottom: 0; top: 50%; transform: translateY(-50%) rotate(180deg); margin: auto; width: 15px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url("../img/icons/corner-top--blue.svg"); transform-origin: center; transition: transform 0.3s ease; } .state-active .faq-01__question_text:before { transform: translateY(-50%); } .faq-01__answer { display: none; margin-top: 20px; color: #303030; font-weight: 400; } .faq-01__answer p:first-of-type { margin-top: 0; } .faq-01__button_box { margin-top: 40px; text-align: center; } .faq-02 { padding: 70px 0 40px; } .faq-02__container { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-top: 30px; } .faq-02__list { padding: 0; margin: 0; list-style: none; width: 50%; } @media (max-width: 750px) { .faq-02__list { width: 100%; } } .faq-02__item { position: relative; padding-right: 40px; padding-left: 35px; margin-bottom: 70px; } .faq-02__item .box:nth-child(odd) { clear: both; } @media (max-width: 500px) { .faq-02__item { margin-bottom: 40px; padding-right: 0; padding-left: 0; } } .faq-02__icon { position: absolute; width: 20px; left: 0; top: 6px; } @media (max-width: 500px) { .faq-02__icon { display: none; } } .faq-02__question_heading { margin-top: 0; color: #23273E; } .faq-02__button_box { padding: 0; margin: 0; list-style: none; margin-top: 40px; text-align: center; } .faq-02__button { display: inline-block; margin-left: 7px; margin-right: 7px; margin-bottom: 10px; } .faq-02__button:last-child { margin-right: 0; } .faq-03 { padding: 70px 0; } .faq-03__container { display: flex; justify-content: space-between; } @media (max-width: 1000px) { .faq-03__container { flex-direction: column-reverse; align-items: center; justify-content: center; } } .faq-03__wrapper { width: calc(100%/2 - 40px); max-width: 550px; margin-right: 80px; } @media (max-width: 1000px) { .faq-03__wrapper { width: 100%; margin-right: 0; } } .faq-03__list { padding: 0; margin: 0; list-style: none; margin-bottom: 40px; } .faq-03__question { position: relative; overflow: hidden; width: 100%; margin-bottom: 10px; padding: 20px 15px 20px 15px; border: 2px solid #D8DDE6; border-radius: 4px; text-align: left; color: #23273E; cursor: pointer; font-weight: 700; line-height: 1.4; letter-spacing: 0.01em; transition: border-color 0.25s ease, color 0.25s ease; } .faq-03__question:hover { border-color: #23273E; } .faq-03__question_text { position: relative; padding-left: 50px; } .faq-03__question_text:before { content: ""; position: absolute; left: 10px; bottom: 0; top: 50%; transform: translateY(-50%) rotate(180deg); margin: auto; width: 15px; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url("../img/icons/corner-top--blue.svg"); transform-origin: center; transition: transform 0.3s ease; } .state-active .faq-03__question_text:before { transform: translateY(-50%); } .faq-03__answer { display: none; margin-top: 20px; color: #303030; font-weight: 400; } .faq-03__answer p:first-of-type { margin-top: 0; } .faq-03__button_box { max-width: 300px; padding: 0 20px; margin: 0 auto; text-align: center; } .faq-03__button_text { margin-bottom: 15px; font-size: 16px; color: #20313C; line-height: 1.4; opacity: 0.5; } .faq-03__video { width: calc(100%/2 - 40px); max-width: 550px; padding-top: 25px; } @media (max-width: 1000px) { .faq-03__video { width: 100%; padding-top: 0; margin-bottom: 40px; } } .faq-03__video_box { width: 100%; height: 350px; margin-bottom: 25px; border-radius: 10px; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); box-shadow: 0 12px 44px 0 rgba(0, 0, 0, 0.1); background-color: #303030; position: relative; overflow: hidden; } .faq-03__video_box .spinner { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } @media (max-width: 1100px) { .faq-03__video_box { height: 300px; } } @media (max-width: 1000px) { .faq-03__video_box { height: 350px; } } @media (max-width: 500px) { .faq-03__video_box { height: 300px; } } @media (max-width: 475px) { .faq-03__video_box { height: 275px; } } @media (max-width: 420px) { .faq-03__video_box { height: 250px; } } @media (max-width: 320px) { .faq-03__video_box { height: 220px; } } .faq-03__iframe { position: relative; z-index: 10; height: 100%; width: 100%; } .faq-03__text_box { max-width: 375px; margin: 0 auto; text-align: center; } .faq-03__text_box .link_badge { width: 100px; min-height: 20px; margin: 0 auto; transform: none; display: flex; align-items: center; justify-content: center; background-color: rgba(75, 202, 129, 0.2); color: #4BCA81; position: static; } .faq-03__video_text { margin-top: 0; margin-bottom: 15px; font-size: 16px; font-weight: 400; line-height: 1.4; color: #20313C; opacity: 0.9; } .faq-04 { padding: 70px 0; } .faq-04__container { margin-bottom: 40px; } .faq-04__container .title-box--center { margin-bottom: 0; } .faq-04__list { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; } .faq-04__list--bigger .faq-04__item { width: 60%; padding: 20px; margin-bottom: 20px; border-radius: 10px; box-sizing: border-box; transition: background-color 0.2s ease; } .faq-04__list--bigger .faq-04__item:nth-child(2n) { margin-left: auto; } .faq-04__list--bigger .faq-04__item:hover { background-color: #F6F6F6; } @media (max-width: 750px) { .faq-04__list--bigger .faq-04__item { margin-left: auto; margin-right: auto; } } @media (max-width: 500px) { .faq-04__list--bigger .faq-04__item { width: 100%; } } .faq-04__list--smaller .faq-04__item { width: calc(100%/2 - 40px); padding: 20px; margin-right: 80px; margin-bottom: 20px; border-radius: 10px; box-sizing: border-box; transition: background-color 0.2s ease; } .faq-04__list--smaller .faq-04__item:nth-child(2n) { margin-right: 0; } .faq-04__list--smaller .faq-04__item:hover { background-color: #F6F6F6; } .faq-04__list--smaller .faq-04__item--question { background-color: #E9F1FF; display: flex; justify-content: center; align-items: center; } .faq-04__list--smaller .faq-04__item--question:hover { background-color: #E9F1FF; } .faq-04__list--smaller .faq-04__item:nth-last-child(-n+2) { margin-bottom: 0; } @media (max-width: 750px) { .faq-04__list--smaller .faq-04__item { width: 60%; margin-right: 0; margin-bottom: 20px; } .faq-04__list--smaller .faq-04__item:nth-last-child(-n+2) { margin-bottom: 20px; } .faq-04__list--smaller .faq-04__item:last-child { margin-bottom: 0; } } @media (max-width: 500px) { .faq-04__list--smaller .faq-04__item { width: 100%; margin-right: 0; } } @media (max-width: 750px) { .faq-04__list--smaller { justify-content: center; } } .faq-04__heading { margin: 0; } .faq-04__title { margin-top: 0; margin-bottom: 10px; font-size: 16px; line-height: 1.4; } .faq-04__text { margin: 0; font-size: 16px; line-height: 1.4; opacity: 0.8; } .faq-05 { padding: 70px 0; } .faq-05__heading { margin-top: 0; margin-bottom: 30px; text-align: center; } .faq-05__sub_heading { margin-top: 0; margin-bottom: 60px; max-width: 500px; margin-left: auto; margin-right: auto; font-size: 16px; line-height: 1.4; font-weight: 400; text-align: center; color: rgba(48, 48, 48, 0.8); } .faq-05__list { padding: 0; margin: 0; list-style: none; } .faq-05__list::after { content: ""; display: block; clear: both; } .faq-05__item { width: calc(100%/2 - 20px); padding: 20px 25px 25px; margin-right: 40px; margin-bottom: 40px; border: 1px solid #D8DDE6; box-sizing: border-box; border-radius: 10px; float: left; } .faq-05__item:nth-child(2n) { margin-right: 0; float: right; } .faq-05__item:last-child { margin-right: 0; } @media (max-width: 800px) { .faq-05__item { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; float: none; } .faq-05__item:nth-child(2n) { margin-right: auto; float: none; } } .faq-05__item:last-child { margin-right: auto; margin-bottom: 0; } .faq-05__top_box { padding-bottom: 15px; border-bottom: 1px solid #D8DDE6; } .faq-05__title { margin-top: 0; margin-bottom: 15px; font-size: 24px; line-height: 1.4; display: flex; align-items: center; } .faq-05__icon { width: 25px; height: 25px; margin-right: 15px; } .faq-05__text { font-size: 16px; line-height: 1.4; opacity: 0.5; } .faq-05__link_list { padding: 0; margin: 0; list-style: none; padding: 20px 0 0; } .faq-05__link_item { padding-left: 20px; margin-bottom: 15px; display: flex; align-items: center; position: relative; } .faq-05__link_item:last-child { margin-bottom: 0; } .faq-05__link_item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: #D8DDE6; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .faq-05__link_item:last-child { margin-bottom: 0; } .faq-05__link { line-height: 1.4; color: #23273E; text-decoration: none; } .faq-05__link:hover { text-decoration: underline; } .features-01 { padding: 40px 0 40px; } .features-01__title_box { text-align: center; } .features-01__items { padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-top: 60px; } @media (max-width: 990px) { .features-01__items { justify-content: center; } } .features-01__item { width: 30%; max-width: 350px; margin-bottom: 60px; padding-right: 30px; } @media (max-width: 990px) { .features-01__item { width: 50%; } } @media (max-width: 600px) { .features-01__item { width: 100%; padding-right: 0; } } .features-02 { padding: 70px 0 40px; } .features-02__title_box { text-align: center; } .features-02__items { padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } @media (max-width: 900px) { .features-02__items { justify-content: center; } } .features-02__item { width: 33%; padding: 0 15px; } @media (max-width: 900px) { .features-02__item { width: 100%; margin-bottom: 30px; } } @media (max-width: 900px) { .features-02__item { padding: 0; } } .features-02__item_box { max-width: 300px; margin: auto; } .features-02__number { position: relative; font-size: 50px; font-weight: 700; } .features-02__number:before { content: ""; position: absolute; left: 0; bottom: -20px; height: 2px; width: 30px; background-color: #23273E; } @media (max-width: 600px) { .features-02__number { font-size: 35px; } } .features-02__word { vertical-align: baseline; margin-left: 5px; font-size: 16px; font-weight: 400; } .features-02__description { margin-top: 50px; max-width: 400px; } .features-03 { padding: 70px 0 40px; } .features-03__title_box { text-align: center; } .features-03__items { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; } .features-03__item { width: 30%; text-align: center; } @media (max-width: 760px) { .features-03__item { width: 100%; margin-bottom: 60px; } .features-03__item:last-child { margin-bottom: 0; } } .features-03__img_box { display: flex; justify-content: center; align-items: center; } .features-03__img { transform: scale(0.7); transform-origin: center; max-height: 80px; } .features-03__number { margin-top: 30px; margin-bottom: 10px; font-weight: 700; font-size: 50px; } @media (max-width: 760px) { .features-03__number { margin-top: 15px; font-size: 35px; } } .features-03__word { line-height: 1.4; max-width: 200px; margin: auto; } .features-04 { padding: 70px 0 40px; } .features-04__title_box { text-align: center; } .features-04__items { padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-top: 60px; } @media (max-width: 990px) { .features-04__items { justify-content: center; } } .features-04__item { width: 30%; max-width: 350px; margin-bottom: 60px; padding: 0 15px; } @media (max-width: 990px) { .features-04__item { width: 50%; } } @media (max-width: 600px) { .features-04__item { width: 100%; padding-right: 0; } } .features-05 { padding: 70px 0 70px; } .features-05__title_box { text-align: center; } .features-05__items__wrapper { display: flex; justify-content: center; flex-wrap: wrap; } .features-05__item_box { padding-right: 70px; } .features-05__item_box:last-child { padding-right: 0; } @media (max-width: 900px) { .features-05__item_box { width: 100%; padding-right: 0; margin-bottom: 50px; text-align: center; } } .features-05__item_title { margin: 0 0 20px 0; } .features-05__items { padding: 0; margin: 0; list-style: none; } .features-05__item { margin-bottom: 15px; } .features-05__item:last-child { margin-bottom: 0; } .features-05__item_text { display: inline-block; max-width: 200px; } .features-05__item_icon { position: relative; top: 5px; vertical-align: top; height: 12px; margin-right: 10px; } .features-06__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .features-06__main { position: relative; z-index: 20; padding: 40px 40px 40px 0; width: 50%; } @media (max-width: 700px) { .features-06__main { width: 100%; padding-right: 0; padding-top: 0; } } .features-06__main_content { max-width: 550px; } .features-06__heading { max-width: 400px; } .features-06__text { max-width: 450px; } .features-06__buttons_box { margin-top: 45px; } .features-06__visual { width: 50%; } @media (max-width: 700px) { .features-06__visual { width: 100%; margin-bottom: 60px; } } .features-06__img_box { font-size: 0; } .features-06__img { max-width: 100%; max-height: 100%; font-size: 14px; } .features-07__wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; flex-direction: row-reverse; } .features-07__main { position: relative; z-index: 20; padding-left: 40px; padding-top: 40px; padding-bottom: 40px; width: 50%; } @media (max-width: 700px) { .features-07__main { width: 100%; padding-left: 0; padding-top: 0; } } .features-07__main_content { max-width: 550px; } .features-07__heading { max-width: 400px; } .features-07__text { max-width: 450px; } .features-07__buttons_box { margin-top: 45px; } .features-07__visual { width: 50%; } @media (max-width: 700px) { .features-07__visual { width: 100%; margin-bottom: 60px; } } .features-07__img_box { font-size: 0; } .features-07__img { max-width: 100%; max-height: 100%; font-size: 14px; } .features-08 { padding: 70px 0; } .features-08__container { display: flex; align-items: center; } @media (max-width: 900px) { .features-08__container { flex-direction: column; } } .features-08__image_wrapper { width: 300px; min-height: 525px; max-height: 600px; margin-right: auto; position: relative; } @media (max-width: 900px) { .features-08__image_wrapper { margin-left: auto; margin-bottom: 40px; } } @media (max-width: 500px) { .features-08__image_wrapper { width: 280px; min-height: 490px; } } @media (max-width: 420px) { .features-08__image_wrapper { width: 260px; min-height: 460px; } } @media (max-width: 320px) { .features-08__image_wrapper { width: 100%; padding: 0 10px; max-width: 240px; min-height: 440px; box-sizing: border-box; } } .features-08__image_box { width: 80%; max-width: 100%; height: auto; max-height: 100%; position: absolute; } .features-08__image_box--black { top: 0; left: 0; z-index: 1; } .features-08__image_box--white { bottom: 0; right: 0; z-index: 2; } .features-08__list { width: 40%; padding: 0; margin: 0; list-style: none; } @media (max-width: 900px) { .features-08__list { width: 100%; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; } } @media (max-width: 750px) { .features-08__list { flex-direction: column; align-items: center; } } .features-08__item { padding-left: 60px; margin-bottom: 50px; position: relative; } .features-08__item:last-child { margin-bottom: 0; } .features-08__item .feature__icon { position: absolute; top: 0; left: 0; } @media (max-width: 900px) { .features-08__item { width: calc(100% / 3 - 20px); padding-left: 0; margin: 0; margin-bottom: 25px; margin-right: 25px; display: flex; flex-direction: column; text-align: center; box-sizing: border-box; } .features-08__item:nth-child(3n) { margin-right: 0; } .features-08__item .feature__title { display: flex; flex-direction: column; } .features-08__item .feature__icon { margin: 0 auto 15px; position: relative; } } @media (max-width: 750px) { .features-08__item { width: 65%; margin-right: 0; margin-bottom: 40px; max-width: 280px; } } @media (max-width: 500px) { .features-08__item { width: 80%; } } @media (max-width: 420px) { .features-08__item { width: 90%; } } .features-09 { padding: 70px 0; } .features-09__container { position: relative; } .features-09__grid { position: absolute; left: 0; right: 0; top: 0; max-width: 1000px; width: 100%; margin: auto; z-index: -1; } .features-09__list { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; } .features-09__item { width: calc(100%/4 - 15px); padding: 30px 40px 40px 30px; margin-right: 20px; margin-bottom: 20px; box-sizing: border-box; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2); border-radius: 10px; background-color: white; } .features-09__item:nth-child(4n) { margin-right: 0; } .features-09__item:last-child { margin-right: 0; margin-bottom: 0; } .features-09__item--new { border: 2px solid #23273E; position: relative; } .features-09__item--new .tag { background-color: #23273E; color: white; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); } @media (max-width: 1000px) { .features-09__item { width: calc(100%/3 - 20px); margin-right: 30px; margin-bottom: 30px; } .features-09__item:nth-child(4n) { margin-right: 30px; } .features-09__item:nth-child(3n) { margin-right: 0; } } @media (max-width: 800px) { .features-09__item { width: calc(100%/2 - 15px); margin-right: 30px; } .features-09__item:nth-child(3n) { margin-right: 30px; } .features-09__item:nth-child(2n) { margin-right: 0; } } @media (max-width: 550px) { .features-09__item { width: 100%; max-width: 420px; margin-right: 0; } .features-09__item:nth-child(3n) { margin-right: 0; } } .features-09__title { margin-top: 0; margin-bottom: 10px; font-size: 20px; line-height: 1.4; font-weight: 700; } .features-09__text { font-size: 16px; line-height: 1.4; color: rgba(48, 48, 48, 0.8); } .features-10 { padding: 70px 0; background-color: #F6F6F6; } .features-10__list { padding: 0; margin: 0; list-style: none; padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; justify-content: center; background-color: white; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2); border-radius: 10px; } @media (max-width: 850px) { .features-10__list { background-color: transparent; border-radius: unset; box-shadow: none; } } .features-10__item { width: 50%; padding: 20px 40px; box-sizing: border-box; border-right: 1px solid rgba(151, 151, 151, 0.15); } .features-10__item:nth-child(2n) { border-right: none; } .features-10__item:last-child { border-right: none; } .features-10__item .feature { padding-left: 70px; position: relative; } .features-10__item .feature__icon { margin-right: 0; position: absolute; top: 0; left: 0; } .features-10__item .feature__title_text { font-size: 20px; text-transform: none; } @media (max-width: 850px) { .features-10__item { width: 100%; max-width: 450px; margin-bottom: 30px; background-color: white; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2); border-radius: 10px; } .features-10__item:last-child { margin-bottom: 0; } } @media (max-width: 550px) { .features-10__item { padding: 20px 30px; } .features-10__item .feature { padding-left: 0; } .features-10__item .feature__title { display: flex; align-items: center; } .features-10__item .feature__icon { margin-right: 10px; position: static; } } .features-11 { padding: 70px 0; overflow: hidden; } .features-11__container { position: relative; } .features-11__notebook { width: 1100px; height: 600px; position: absolute; right: -40%; top: 50%; z-index: -1; transform: translateY(-50%); } @media (max-width: 1100px) { .features-11__notebook { right: -55%; } } @media (max-width: 1000px) { .features-11__notebook { right: -62%; } } @media (max-width: 950px) { .features-11__notebook { width: 100%; height: auto; margin-bottom: 100px; position: static; transform: none; } } .features-11__wrapper { max-width: 550px; min-height: 600px; margin-right: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } @media (max-width: 950px) { .features-11__wrapper { min-height: unset; margin-left: auto; } } .heading.features-11__heading, .features-11__heading.text--04__big_text { margin-top: 0; margin-bottom: 25px; } @media (max-width: 950px) { .heading.features-11__heading, .features-11__heading.text--04__big_text { text-align: center; } } .features-11__text { margin-bottom: 60px; font-size: 16px; line-height: 1.4; } @media (max-width: 950px) { .features-11__text { text-align: center; } } .features-11__list { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; } .features-11__item { width: calc(100%/2 - 20px); margin-right: 40px; margin-bottom: 40px; } .features-11__item:nth-child(2n) { margin-right: 0; } .features-11__item:last-child { margin-right: 0; margin-bottom: 0; } .features-11__item .feature__title { display: flex; flex-direction: column; } .features-11__item .feature__icon { margin-right: 0; margin-bottom: 20px; } @media (max-width: 550px) { .features-11__item { width: 100%; max-width: 400px; margin-right: 0; text-align: center; } .features-11__item .feature__icon { margin-right: auto; margin-left: auto; margin-bottom: 20px; } } .features-12 { padding: 70px 0; overflow: hidden; } .features-12__container { position: relative; } .features-12__notebook { width: 1100px; height: 600px; position: absolute; left: -40%; top: 50%; z-index: -1; transform: translateY(-50%); } @media (max-width: 1100px) { .features-12__notebook { left: -55%; } } @media (max-width: 1000px) { .features-12__notebook { left: -62%; } } @media (max-width: 950px) { .features-12__notebook { width: 100%; height: auto; margin-bottom: 100px; position: static; transform: none; } } .features-12__wrapper { max-width: 550px; min-height: 600px; margin-left: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } @media (max-width: 950px) { .features-12__wrapper { align-items: flex-start; min-height: unset; margin-right: auto; } } .features-12__heading { margin-top: 0; margin-bottom: 25px; } @media (max-width: 950px) { .features-12__heading { text-align: center; } } .features-12__text { margin-bottom: 60px; font-size: 16px; line-height: 1.4; } @media (max-width: 950px) { .features-12__text { text-align: center; } } .features-12__list { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; } .features-12__item { width: calc(100%/2 - 20px); margin-right: 40px; margin-bottom: 40px; } .features-12__item:nth-child(2n) { margin-right: 0; } .features-12__item:last-child { margin-right: 0; } .features-12__item .feature__title { display: flex; flex-direction: column; } .features-12__item .feature__icon { margin-right: 0; margin-bottom: 20px; } @media (max-width: 550px) { .features-12__item { width: 100%; max-width: 400px; margin-right: 0; text-align: center; } .features-12__item .feature__icon { margin-right: auto; margin-left: auto; margin-bottom: 20px; } } .features-13 { padding: 70px 0; } .features-13__container { display: flex; flex-direction: row-reverse; align-items: center; } @media (max-width: 900px) { .features-13__container { flex-direction: column; } } .features-13__image_wrapper { width: 300px; min-height: 525px; max-height: 600px; margin-left: auto; position: relative; } @media (max-width: 900px) { .features-13__image_wrapper { margin-right: auto; margin-bottom: 40px; } } @media (max-width: 500px) { .features-13__image_wrapper { width: 280px; min-height: 490px; } } @media (max-width: 420px) { .features-13__image_wrapper { width: 260px; min-height: 460px; } } @media (max-width: 320px) { .features-13__image_wrapper { width: 100%; padding: 0 10px; max-width: 240px; min-height: 440px; box-sizing: border-box; } } .features-13__image_box { width: 80%; max-width: 100%; height: auto; max-height: 100%; position: absolute; } .features-13__image_box--black { top: 0; left: 0; z-index: 1; } .features-13__image_box--white { bottom: 0; right: 0; z-index: 2; } .features-13__list { width: 50%; padding: 0; margin: 0; list-style: none; } @media (max-width: 900px) { .features-13__list { width: 100%; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; } } @media (max-width: 750px) { .features-13__list { flex-direction: column; align-items: center; } } .features-13__item { padding-left: 60px; margin-bottom: 50px; position: relative; } .features-13__item:last-child { margin-bottom: 0; } .features-13__item .feature__icon { position: absolute; top: 0; left: 0; } @media (max-width: 900px) { .features-13__item { width: calc(100% / 3 - 20px); padding-left: 0; margin: 0; margin-bottom: 25px; margin-right: 25px; display: flex; flex-direction: column; text-align: center; box-sizing: border-box; } .features-13__item:nth-child(3n) { margin-right: 0; } .features-13__item .feature__title { display: flex; flex-direction: column; } .features-13__item .feature__icon { margin: 0 auto 15px; position: relative; } } @media (max-width: 750px) { .features-13__item { width: 65%; margin-right: 0; margin-bottom: 40px; max-width: 280px; } } @media (max-width: 500px) { .features-13__item { width: 80%; } } @media (max-width: 420px) { .features-13__item { width: 90%; } } .features-14 { padding: 70px 0 0; } .features-14__container { overflow-y: hidden; border-bottom: 1px solid #F6F6F6; } .features-14__list { padding: 0; margin: 0; list-style: none; max-width: 900px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .features-14__item { width: calc(100%/2 - 50px); margin-right: 100px; margin-bottom: 20px; } .features-14__item:nth-child(2n) { margin-right: 0; } .features-14__item:last-child { margin-right: 0; } @media (max-width: 850px) { .features-14__item { width: 100%; max-width: 480px; margin-right: 0; margin-bottom: 40px; } .features-14__item:last-child { margin-bottom: 0; } } .features-14__heading { margin-top: 0; margin-bottom: 20px; } .features-14__text { font-size: 16px; line-height: 1.4; color: rgba(48, 48, 48, 0.8); } .features-14__devices { width: 100%; min-height: 785px; margin-top: -100px; position: relative; bottom: -100px; } @media (max-width: 1100px) { .features-14__devices { min-height: 715px; } } @media (max-width: 1000px) { .features-14__devices { min-height: 670px; margin-top: -120px; } } @media (max-width: 900px) { .features-14__devices { min-height: 600px; } } @media (max-width: 800px) { .features-14__devices { min-height: 530px; } } @media (max-width: 700px) { .features-14__devices { min-height: 460px; } } @media (max-width: 600px) { .features-14__devices { min-height: 385px; margin-top: -100px; } } @media (max-width: 500px) { .features-14__devices { min-height: 340px; margin-top: -90px; bottom: -75px; } } @media (max-width: 400px) { .features-14__devices { min-height: 280px; bottom: -55px; } } @media (max-width: 320px) { .features-14__devices { min-height: 240px; } } .features-14__iphone_box { width: 25%; position: absolute; bottom: 0; left: 50%; z-index: 3; transform: translateX(-50%); } .features-14__ipad_box { width: 43%; position: absolute; bottom: 0; right: 0; z-index: 2; } .features-14__macbook_box { width: 95%; position: absolute; bottom: 0; left: -10%; z-index: 1; } .features-15 { padding: 70px 0; } .features-15__heading { margin-top: 0; margin-bottom: 50px; text-align: center; } .features-15__list { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; } @media (max-width: 700px) { .features-15__list { flex-direction: column; align-items: center; } } .features-15__item { width: calc(100%/2 - 30px); padding: 10px 20px 10px 40px; margin-right: 60px; background-color: transparent; box-sizing: border-box; border-radius: 4px; display: flex; align-items: center; transition: background-color 0.2s ease; position: relative; } .features-15__item:nth-child(2n) { margin-right: 0; } .features-15__item:hover { background-color: #F6F6F6; } .features-15__item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: #23273E; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); } @media (max-width: 700px) { .features-15__item { width: 100%; max-width: 550px; margin-right: 0; } .features-15__item:last-child { margin-bottom: 0; } } .features-15__text { font-size: 16px; line-height: 1.4; } .features-16 { padding: 70px 0; background-color: #F6F6F6; } .features-16__container { display: flex; justify-content: center; align-items: center; } @media (max-width: 900px) { .features-16__container { flex-direction: column; } } .features-16__intergration_list { padding: 0; margin: 0; list-style: none; padding: 60px 60px 60px 0; display: flex; align-items: center; justify-content: center; border-right: 1px solid #eee; } @media (max-width: 900px) { .features-16__intergration_list { padding: 30px 0; flex-wrap: wrap; border-right: none; border-bottom: 1px solid #eee; } } .features-16__integration { max-width: 100px; max-height: 100px; border-radius: 50%; margin-right: 30px; display: flex; align-items: center; justify-content: center; } .features-16__integration:last-child { margin-right: 0; } @media (max-width: 900px) { .features-16__integration { width: calc(100%/4 - 15px); max-width: unset; max-height: unset; margin-right: 20px; margin-bottom: 20px; } .features-16__integration:nth-child(4n) { margin-right: 0; } .features-16__integration:last-child { margin-right: 0; } } @media (max-width: 500px) { .features-16__integration { width: calc(100%/2 - 20px); margin-right: 40px; } .features-16__integration:nth-child(2n) { margin-right: 0; } .features-16__integration:nth-child(4n) { margin-right: 0; } .features-16__integration:last-child { margin-right: 0; } } .features-16__logo { width: 100%; max-width: 100px; height: auto; } .features-16__text_box { max-width: 400px; padding-left: 45px; } @media (max-width: 900px) { .features-16__text_box { padding-left: 0; padding-top: 30px; } } @media (max-width: 600px) { .features-16__text_box { max-width: 300px; } } .features-16__heading { margin-top: 0; margin-bottom: 10px; } .features-16__text { margin-top: 0; margin-bottom: 20px; font-size: 16px; line-height: 1.4; opacity: 0.8; } .features-16__link { color: #23273E; } .features-17 { padding: 70px 0; } .features-17__list { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; align-items: center; } .features-17__item { padding: 30px 35px 30px 30px; margin-bottom: 30px; border-radius: 10px; border: 2px solid rgba(151, 151, 151, 0.2); } .features-17__item:last-child { margin-bottom: 0; } .features-17__item .feature { padding-left: 60px; position: relative; } .features-17__item .feature__icon { margin-right: 0; position: absolute; top: 0; left: 0; } .features-17__item .feature__title_text { color: #23273E; } @media (max-width: 550px) { .features-17__item { padding: 25px 20px; } .features-17__item .feature { padding-left: 0; } .features-17__item .feature__icon { position: static; margin-right: 10px; } } .press-01 { padding: 70px 0 70px; text-align: center; } .press-01__list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 70px; } .press-01__link { display: inline-block; padding: 10px 14px 8px; border-radius: 4px; text-decoration: none; transition: background-color 0.2s ease; } .press-01__link:hover { background-color: #eee; } .press-01__item { margin-bottom: 40px; margin-left: 10px; margin-right: 10px; } .press-01__logo { max-height: 40px; } .press-02 { padding: 70px 0 70px; text-align: center; } .press-02__list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; } .press-02__item { width: 45%; } @media (max-width: 700px) { .press-02__item { width: 100%; text-align: center; } } .press-02__link { display: inline-block; padding: 12px 14px 16px; border-radius: 4px; text-decoration: none; text-align: center; transition: background-color 0.2s ease; } .press-02__link:hover { background-color: #eee; } .press-02__item { margin-bottom: 40px; } .press-02__text { margin-top: 0; margin-bottom: 40px; font-size: 20px; line-height: 1.6; color: #303030; max-width: 300px; } .press-02__logo { max-height: 50px; } .press-03 { padding: 70px 0; } .press-03__headline { margin-bottom: 60px; text-align: center; } @media (max-width: 750px) { .press-03__headline { margin-bottom: 30px; } } .press-03__list { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; } @media (max-width: 750px) { .press-03__list { flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; } } .press-03__item { width: 44%; margin-bottom: 65px; } .press-03__item:nth-last-child(-n+2) { margin-bottom: 0; } @media (max-width: 750px) { .press-03__item { width: 50%; margin-bottom: 40px; text-align: center; } .press-03__item:nth-last-child(2) { margin-bottom: 40px; } } @media (max-width: 500px) { .press-03__item { width: 80%; } } @media (max-width: 420px) { .press-03__item { width: 90%; } } .press-03__link { padding: 12px 14px 16px 35px; display: inline-block; text-decoration: none; border-radius: 4px; transition: background-color 0.2s ease; position: relative; } .press-03__link:hover { background-color: #eee; } @media (max-width: 750px) { .press-03__link { padding: 12px 14px 16px; } } .press-03__image-box { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background-color: #303030; box-sizing: border-box; position: absolute; left: 6px; top: 12px; } @media (max-width: 750px) { .press-03__image-box { margin: 0 auto 10px; position: relative; top: 0; left: 0; } } .press-03__logo { max-width: 14px; max-height: 8px; } .press-03__heading { margin-top: 0; margin-bottom: 15px; font-size: 16px; color: #23273E; } .press-03__info { margin: 0; font-size: 16px; color: #20313C; } .steps-01 { padding: 70px 0 70px; } .steps-01__list { padding: 0; margin: 0; list-style: none; position: relative; margin-top: 70px; } .steps-01__list:before { content: ""; display: block; position: absolute; width: 1px; top: 0; left: 50%; bottom: 0; background-color: #eee; } @media (max-width: 760px) { .steps-01__list:before { left: 5px; } } @media (max-width: 760px) { .steps-01__list { padding-left: 40px; } } .steps-01__item { position: relative; padding-bottom: 120px; } .steps-01__item:nth-child(odd) { text-align: right; } .steps-01__item:nth-child(odd) .steps-01__text_box { padding-left: 40px; text-align: left; } .steps-01__item:nth-child(odd) .steps-01__img_box { padding-right: 40px; text-align: right; } .steps-01__item:nth-child(odd) .steps-01__content { flex-direction: row-reverse; } .steps-01__item:last-child { padding-bottom: 50px; } .steps-01__content { display: flex; justify-content: center; flex-wrap: wrap; } @media (max-width: 760px) { .steps-01__content { flex-direction: column !important; } } .steps-01__text_box { width: 50%; padding-right: 40px; text-align: right; } @media (max-width: 760px) { .steps-01__text_box { padding: 0 !important; width: 100%; max-width: 400px; text-align: left; } } .steps-01__heading { margin-top: 0; } .steps-01__img_box { width: 50%; padding-left: 40px; } @media (max-width: 760px) { .steps-01__img_box { padding: 0 !important; width: 100%; text-align: left !important; } } .steps-01__img { padding-top: 30px; max-width: 100%; max-height: 300px; } .steps-01__number { display: flex; justify-content: center; align-items: center; position: absolute; left: 50%; height: 30px; padding-left: 4px; padding-right: 4px; min-width: 30px; transform: translateX(-50%); border-radius: 999px; border: 1px solid #eee; background-color: white; font-family: monospace; } @media (max-width: 760px) { .steps-01__number { left: -34px; } } .steps-01__last_bubble { position: relative; z-index: 20; padding: 5px; background-color: white; text-align: center; } @media (max-width: 760px) { .steps-01__last_bubble { left: -15px; text-align: left; } } .steps-01__last_bubble_img { height: 30px; } .steps-02 { padding: 70px 0 70px; } .steps-02__list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 70px; } @media (max-width: 750px) { .steps-02__list { flex-direction: column; } } .steps-02__item { width: 33%; text-align: center; } @media (max-width: 750px) { .steps-02__item { position: relative; width: 100%; margin-bottom: 90px; } .steps-02__item:last-child { margin-bottom: 0; } } .steps-02__img_box { position: relative; } @media (max-width: 750px) { .steps-02__img_box { position: static; } } .steps-02__img { max-height: 200px; max-width: 200px; } @media (max-width: 800px) { .steps-02__img { max-height: 180px; max-width: 180px; } } .steps-02__text { margin-top: 15px; max-width: 300px; margin-left: auto; margin-right: auto; line-height: 1.4; } .steps-02__icon { position: absolute; top: 50%; transform: translateY(-50%) translateX(50%); right: 0; width: 20px; } @media (max-width: 750px) { .steps-02__icon { left: 0; right: 0; margin: auto; top: auto; bottom: -20px; transform: translateY(50%) rotate(90deg); } } .steps-03 { padding: 70px 0 70px; } .steps-03__list { padding: 0; margin: 0; list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 70px; } @media (max-width: 750px) { .steps-03__list { flex-direction: column; } } .steps-03__item { width: 25%; text-align: center; } @media (max-width: 750px) { .steps-03__item { position: relative; width: 100%; margin-bottom: 90px; } .steps-03__item:last-child { margin-bottom: 0; } } .steps-03__img_box { position: relative; } @media (max-width: 750px) { .steps-03__img_box { position: static; } } .steps-03__img { max-height: 140px; max-width: 140px; } @media (max-width: 800px) { .steps-03__img { max-height: 110px; max-width: 110px; } } .steps-03__text { margin-top: 15px; max-width: 300px; margin-left: auto; margin-right: auto; line-height: 1.4; } .steps-03__icon { position: absolute; top: 50%; transform: translateY(-50%) translateX(50%); right: 0; width: 20px; } @media (max-width: 750px) { .steps-03__icon { left: 0; right: 0; margin: auto; top: auto; bottom: -20px; transform: translateY(50%) rotate(90deg); } } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ /* Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) */ /* pswp = photoswipe */ .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ -webkit-backface-visibility: hidden; outline: none; } .pswp * { box-sizing: border-box; } .pswp img { max-width: none; } /* style is added when JS option showHideOpacity is set to true */ .pswp--animate_opacity { /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ opacity: 0.001; will-change: opacity; /* for open/close transition */ transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--open { display: block; } .pswp--zoom-allowed .pswp__img { /* autoprefixer: off */ cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .pswp--zoomed-in .pswp__img { /* autoprefixer: off */ cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .pswp--dragging .pswp__img { /* autoprefixer: off */ cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* Background is added as a separate element. As animating opacity is much faster than animating rgba() background-color. */ .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .pswp__container, .pswp__zoom-wrap { touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; transform-origin: left top; /* for open/close transition */ transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp__bg { will-change: opacity; /* for open/close transition */ transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { transition: none; } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; } /* stretched thumbnail or div placeholder element (see below) style is added to avoid flickering in webkit/blink when layers overlap */ .pswp__img--placeholder { -webkit-backface-visibility: hidden; } /* div element that matches size of large image large image loads on top of it */ .pswp__img--placeholder--blank { background: #222; } .pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; } /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #CCC; } .pswp__error-msg a { color: #CCC; text-decoration: underline; } /*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ /* Contents: 1. Buttons 2. Share modal and links 3. Index indicator ("1 of X" counter) 4. Caption 5. Loading indicator 6. Additional styles (root element, top bar, idle state, hidden state, etc.) */ /* 1. Buttons */ /* css reset */ .pswp__button { width: 44px; height: 44px; position: relative; background: none; cursor: pointer; overflow: visible; -webkit-appearance: none; display: block; border: 0; padding: 0; margin: 0; float: right; opacity: 0.75; transition: opacity 0.2s; box-shadow: none; } .pswp__button:focus, .pswp__button:hover { opacity: 1; } .pswp__button:active { outline: none; opacity: 0.9; } .pswp__button::-moz-focus-inner { padding: 0; border: 0; } /* pswp__ui--over-close class it added when mouse is over element that should close gallery */ .pswp__ui--over-close .pswp__button--close { opacity: 1; } .pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { background: url(../img/other/plugin/default-skin.png) 0 0 no-repeat; background-size: 264px 88px; width: 44px; height: 44px; } @media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */ .pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before { background-image: url(../img/other/plugin/default-skin.svg); } .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right { background: none; } } .pswp__button--close { background-position: 0 -44px; } .pswp__button--share { background-position: -44px -44px; } .pswp__button--fs { display: none; } .pswp--supports-fs .pswp__button--fs { display: block; } .pswp--fs .pswp__button--fs { background-position: -44px 0; } .pswp__button--zoom { display: none; background-position: -88px 0; } .pswp--zoom-allowed .pswp__button--zoom { display: block; } .pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0; } /* no arrows on touch screens */ .pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { visibility: hidden; } /* Arrow buttons hit area (icon is added to :before pseudo-element) */ .pswp__button--arrow--left, .pswp__button--arrow--right { background: none; top: 50%; margin-top: -50px; width: 70px; height: 100px; position: absolute; } .pswp__button--arrow--left { left: 0; } .pswp__button--arrow--right { right: 0; } .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { content: ''; top: 35px; background-color: rgba(0, 0, 0, 0.3); height: 30px; width: 32px; position: absolute; } .pswp__button--arrow--left:before { left: 6px; background-position: -138px -44px; } .pswp__button--arrow--right:before { right: 6px; background-position: -94px -44px; } /* 2. Share modal/popup and links */ .pswp__counter, .pswp__share-modal { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .pswp__share-modal { display: block; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; top: 0; left: 0; padding: 10px; position: absolute; z-index: 1600; opacity: 0; transition: opacity 0.25s ease-out; -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__share-modal--hidden { display: none; } .pswp__share-tooltip { z-index: 1620; position: absolute; background: #FFF; top: 56px; border-radius: 2px; display: block; width: auto; right: 44px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); transform: translateY(6px); transition: transform 0.25s; -webkit-backface-visibility: hidden; will-change: transform; } .pswp__share-tooltip a { display: block; padding: 8px 12px; color: #000; text-decoration: none; font-size: 14px; line-height: 18px; } .pswp__share-tooltip a:hover { text-decoration: none; color: #000; } .pswp__share-tooltip a:first-child { /* round corners on the first/last list item */ border-radius: 2px 2px 0 0; } .pswp__share-tooltip a:last-child { border-radius: 0 0 2px 2px; } .pswp__share-modal--fade-in { opacity: 1; } .pswp__share-modal--fade-in .pswp__share-tooltip { transform: translateY(0); } /* increase size of share links on touch devices */ .pswp--touch .pswp__share-tooltip a { padding: 16px 12px; } a.pswp__share--facebook:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -12px; right: 15px; border: 6px solid transparent; border-bottom-color: #FFF; -webkit-pointer-events: none; -moz-pointer-events: none; pointer-events: none; } a.pswp__share--facebook:hover { background: #3E5C9A; color: #FFF; } a.pswp__share--facebook:hover:before { border-bottom-color: #3E5C9A; } a.pswp__share--twitter:hover { background: #55ACEE; color: #FFF; } a.pswp__share--pinterest:hover { background: #CCC; color: #CE272D; } a.pswp__share--download:hover { background: #DDD; } /* 3. Index indicator ("1 of X" counter) */ .pswp__counter { position: absolute; left: 0; top: 0; height: 44px; font-size: 13px; line-height: 44px; color: #FFF; opacity: 0.75; padding: 0 10px; } /* 4. Caption */ .pswp__caption { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 44px; } .pswp__caption small { font-size: 11px; color: #BBB; } .pswp__caption__center { text-align: left; max-width: 420px; margin: 0 auto; font-size: 13px; padding: 10px; line-height: 20px; color: #CCC; } .pswp__caption--empty { display: none; } /* Fake caption element, used to calculate height of next/prev image */ .pswp__caption--fake { visibility: hidden; } /* 5. Loading indicator (preloader) You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR */ .pswp__preloader { width: 44px; height: 44px; position: absolute; top: 0; left: 50%; margin-left: -22px; opacity: 0; transition: opacity 0.25s ease-out; will-change: opacity; direction: ltr; } .pswp__preloader__icn { width: 15px; height: 15px; border-radius: 50%; margin: 12px; } .pswp__preloader__icn:after { border-radius: 50%; width: 15px; height: 15px; } .pswp__preloader--active { opacity: 1; } .pswp__preloader--active .pswp__preloader__icn { /* We use .gif in browsers that don't support CSS animation */ position: relative; transform: translateZ(0); animation: spin 1.1s infinite linear; border-top: 2px solid rgba(255, 255, 255, 0.4); border-right: 2px solid rgba(255, 255, 255, 0.4); border-bottom: 2px solid rgba(255, 255, 255, 0.4); border-left: 2px solid #23273E; font-size: 10px; text-indent: -9999px; transition: opacity 0.2s ease; } .pswp--css_animation .pswp__preloader--active { opacity: 1; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { animation: clockwise 1100ms linear infinite; } .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; } .pswp--css_animation .pswp__preloader__icn { background: none; opacity: 0.75; width: 14px; height: 14px; position: absolute; left: 15px; top: 15px; margin: 0; } .pswp--css_animation .pswp__preloader__cut { /* The idea of animating inner circle is based on Polymer ("material") loading indicator by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */ position: relative; width: 7px; height: 14px; overflow: hidden; } .pswp--css_animation .pswp__preloader__donut { box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #FFF; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; position: absolute; top: 0; left: 0; background: none; margin: 0; } @media screen and (max-width: 1024px) { .pswp__preloader { position: relative; left: auto; top: auto; margin: 0; float: right; } } @keyframes clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes donut-rotate { 0% { transform: rotate(0); } 50% { transform: rotate(-140deg); } 100% { transform: rotate(0); } } /* 6. Additional styles */ /* root element of UI */ .pswp__ui { -webkit-font-smoothing: auto; visibility: visible; opacity: 1; z-index: 1550; } /* top black bar with buttons and "1 of X" indicator */ .pswp__top-bar { position: absolute; left: 0; top: 0; height: 44px; width: 100%; } .pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { -webkit-backface-visibility: hidden; will-change: opacity; transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } /* pswp--has_mouse class is added only when two subsequent mousemove events occur */ .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { visibility: visible; } .pswp__top-bar, .pswp__caption { background-color: rgba(0, 0, 0, 0.5); } /* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */ .pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { background-color: rgba(0, 0, 0, 0.3); } /* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */ .pswp__ui--idle .pswp__top-bar { opacity: 0; } .pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right { opacity: 0; } /* pswp__ui--hidden class is added when controls are hidden e.g. when user taps to toggle visibility of controls */ .pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right { /* Force paint & create composition layer for controls. */ opacity: 0.001; } /* pswp__ui--one-slide class is added when there is just one item in gallery */ .pswp__ui--one-slide .pswp__button--arrow--left, .pswp__ui--one-slide .pswp__button--arrow--right, .pswp__ui--one-slide .pswp__counter { display: none; } .pswp__element--disabled { display: none !important; } .pswp--minimal--dark .pswp__top-bar { background: none; } .pswp__bg { transition: none !important; background-color: rgba(0, 0, 0, 0.8); } .producthunt { height: 51px; box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), 0 5px 15px 0 rgba(37, 44, 97, 0.15); border-radius: 11px; } .producthunt:hover { transform: translateY(-2px); box-shadow: 0 2px 8px 0 rgba(136, 144, 195, 0.22), 0 8px 15px 0 rgba(37, 44, 97, 0.17); } #malwarewarning { position: relative; background: #fdecea; border-bottom: 1px solid #f3c9c4; color: #7f1d1d; padding: 12px 20px; } #malwarewarning .malwarewarning__inner { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 960px; margin: 0 auto; } #malwarewarning .malwarewarning__icon { flex: 0 0 auto; color: #d13438; } #malwarewarning .malwarewarning__text { margin: 0; font-size: 1rem; line-height: 1.45; text-align: center; } #malwarewarning a { color: #b91c1c; font-weight: 700; text-decoration: underline; } #malwarewarning a:hover { text-decoration: none; } @media (max-width: 767px) { #malwarewarning .malwarewarning__inner { align-items: flex-start; padding-right: 0; } } video { -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; }