File: D:/HostingSpaces/SBogers10/rentman2019.komma.pro/wwwroot/css/style.css
@charset "UTF-8";
/* 1 - SETTINGS
* Global variables, site-wide settings,
* config switches etc.
*
* The order in which these Sass files
* are loaded is critical!
* So please be careful when editing
=========================================================== */
/**
* Define breakpoint for given formats
*/
/**
* Global color variables.
* The underscore prefix means we never use them directly in the styles, only for functions and mixins.
*/
/**
* Organize color variables in a Sass Map.
* This way, the colors can be iterated, are more organized, and are more intuitive to reference.
*/
/* ==========================================================================
Config settings
========================================================================== */
/**
* 1. Maximum INNER width of the site set in pixels
*
* 2. Use a percentage of the viewport for the side gutter to scale it proportionally
* Make sure this is not to small so you have some white space between the edge and the text,
* but not to big also, otherwise you lose valuable real estate
*/
/* 1 */
/* 2 */
/** "Split" columns, halve the size, double the number of columns
‖ 1a | 1b ‖ 2a | 2b ‖ 3a | 3b ‖ 4a | 4b ‖ 5a | 5b ‖ 6a | 6b ‖ 7a | 7b ‖ 8a | 8b ‖ 9a | 9b ‖ 10a | 10b ‖ 11a | 11b ‖ 12a | 12b ‖
*/
/** =====================================================================================
* Defines the typographic baseline.
* We define every size in pixels, the underlying system converts the
* respective units to the responsive REM value.
===================================================================================== */
/**
* Our base font-size and line-height
*/
/**
* Here we assign short names for the font families
*/
/* 2 - TOOLS
* Site wide mixins and functions
=========================================================== */
/* ==========================================================================
* Font related functions
* ========================================================================== */
/**
* Calculate line-height ratio from font-size and line-height in px value
*/
/**
* Mixin for setting font-size in REM through a Sass Map with all available sizes
USAGE:
.myClass {
@include font-size(x-large);
}
*/
/**
* A simple function for accessing the font families from our mapping
USAGE:
span {
@include font-family(primary);
}
*/
/**
* Font mixin for setting font-size, font-weight, and line-height
USAGE:
.myClass {
@include font(x-large, 34, 700);
}
.myClass {
@include font(medium, $weight: 300);
}
*/
/* Media query mixin for writing Mobile First
* ========================================== */
/** =====================================================================================
* Toolbox functions
===================================================================================== */
/**
* Maths helpers.
* Halve and double numbers, returning rounded integers.
USAGE:
.foo {
padding: halve(30px);
}
*/
/**
* Set a width based on the number of columns
* By default the number of grids is used that is defined in the settings
* You can override the total number of columns, then it becomes a standard percentage function.
*/
/**
* Remove the unit of a length
* @param {Number} $number - Number to remove unit from
* @return {Number} - Unitless number
*/
/* Check if value is number */
/* Value to Em */
/* Value to Rem */
/**
* A simple function for accessing the colors from our mapping
* To access colors in our palette, we use a very simple custom Sass function
USAGE:
a {
color: palette(primary);
&:hover {
color: palette(primary, 400);
}
}
*/
/**
* A simple function for setting a consistent box-shadow
USAGE:
.card {
@include box-shadow;
}
.card--alt {
@include box-shadow(low);
}
*/
/**
* A simple function for setting a consistent border-radius
USAGE:
.card {
@include border-radius;
}
.card--alt {
@include border-radius(large);
}
*/
/**
* Lobotomized Owl Selector mixin:
* - Set spacing for consecutive items with margin-top on all but the first item
USAGE:
.box {
@include owl-children;
}
.card__item {
@include owl;
}
*/
/**
* Show hyphens for every browser supporting it
* and will break lines in every other browser
*/
/** =================================================================================================
* The 'z-index-map' is used for managing the elements stacking order in the 'root' stacking context
* This way we have a overview of all the z-index values that are used across the project.
==================================================================================================== */
/**
USAGE:
@include z(z-modal);
*/
/* 3 - ELEMENTS
* Plain old simple HTML elements without a class (type selectors)
=========================================================== */
/* ==========================================================================
* Basic elements (no class selectors allowed)
* ========================================================================== */
/**
* Set up the html
*
* 1. Makes sure that some fonts are better rendered
* 2. Set font to lining figures
*/
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "lnum";
box-sizing: border-box;
overflow-x: hidden;
}
body {
font-size: 1.125rem;
line-height: 1.5555555556;
font-family: "Inter", sans-serif;
margin: 0;
color: #333333;
background: #ffffff;
}
@media screen and (max-width: 939px) {
body {
font-size: 1rem;
}
}
/**
* [1] Make sure elements like input and textarea inherit some base properties
* https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/
*
* [2] Setting box-sizing the best way per:
* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/
* {
font-family: inherit;
line-height: inherit;
color: inherit;
}
*, *:before, *:after {
box-sizing: inherit;
}
/**
* [1] Turn off text-shadow when selecting text for better readability
*/
::-moz-selection {
background: #202121;
color: #ffffff;
text-shadow: none; /* [1] */
}
::selection {
background: #202121;
color: #ffffff;
text-shadow: none; /* [1] */
}
/* Remove default margin around figure
*/
figure {
margin: 0;
}
/**
* [1] Setting 'vertical-align' removes the whitespace that appears under 'img'
* elements when they are dropped into a page as-is. Safer alternative to
* using 'display: block;'.
* [2] Remove border / especially on older browsers
*/
img, svg {
vertical-align: middle; /*[1]*/
border: none; /*[2]*/
max-width: 100%;
}
/**
* Needed for iOS to prevent input zooming
* https://uxcellence.com/2014/01/15/quick-fix-increase-font-size-to-16px-to-fix-input-zoom
*/
input,
select,
textarea {
font-size: 16px;
}
a {
color: #FF6729;
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
}
a:not([class]):hover {
color: #ed4500;
}
h1, h2, h3, h4, h5, h6, hgroup,
ul, ol, dd,
p, figure,
pre, table, fieldset, hr {
margin-top: 0;
margin-bottom: 0;
}
h1, h2, h3, h4, h5 {
line-height: 1.1;
font-family: "Gilroy", sans-serif;
}
h1 {
font-size: 3.25rem;
}
h2 {
font-size: 3rem;
}
h3 {
font-size: 2.5rem;
}
h4 {
font-size: 2rem;
}
h5 {
font-size: 1.75rem;
}
h5.is-sub {
font-size: 1.5rem;
}
h6 {
font-size: 1.25rem;
line-height: 1.1;
}
h6.is-sub {
font-family: "Gilroy", sans-serif;
font-size: 1.375rem;
}
h6.is-alternative-sub {
font-size: 1.5rem;
font-family: "Gilroy", sans-serif;
font-weight: 400;
}
@media screen and (max-width: 939px) {
h1 {
font-size: 2.25rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4, h5 {
font-size: 1.5rem;
}
h6 {
font-size: 1.125rem;
}
}
/** =====================================================================================
* Lists
===================================================================================== */
/**
* Default indentation value for lists
*/
ul,
ol {
padding: 0;
margin: 0;
margin-left: 1.125em;
}
dd {
margin-left: 0;
}
/**
* Remove extra vertical spacing when nesting lists.
*/
li > ul,
li > ol {
margin-bottom: 0;
}
/**
* list-items needs resetting for our Lobotomized Owl selector
*/
li + li {
margin-top: 0;
}
/* inter-regular - latin */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
src: url("/fonts/inter/inter-v3-latin-regular.eot"); /* IE9 Compat Modes */
src: local(""), url("/fonts/inter/inter-v3-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/inter/inter-v3-latin-regular.woff2") format("woff2"), url("/fonts/inter/inter-v3-latin-regular.woff") format("woff"), url("/fonts/inter/inter-v3-latin-regular.ttf") format("truetype"), url("/fonts/inter/inter-v3-latin-regular.svg#Inter") format("svg"); /* Legacy iOS */
font-display: swap;
}
/* inter-500 - latin */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
src: url("/fonts/inter/inter-v3-latin-500.eot"); /* IE9 Compat Modes */
src: local(""), url("/fonts/inter/inter-v3-latin-500.eot?#iefix") format("embedded-opentype"), url("/fonts/inter/inter-v3-latin-500.woff2") format("woff2"), url("/fonts/inter/inter-v3-latin-500.woff") format("woff"), url("/fonts/inter/inter-v3-latin-500.ttf") format("truetype"), url("/fonts/inter/inter-v3-latin-500.svg#Inter") format("svg"); /* Legacy iOS */
font-display: swap;
}
/* Inter 600 */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
src: url("/fonts/inter/inter-v3-latin-500.eot"); /* IE9 Compat Modes */
src: local(""), url("/fonts/inter/Inter-SemiBold.eot?#iefix") format("embedded-opentype"), url("/fonts/inter/Inter-SemiBold.woff2") format("woff2"), url("/fonts/inter/Inter-SemiBold.woff") format("woff"), url("/fonts/inter/Inter-SemiBold.ttf") format("truetype"), url("/fonts/inter/Inter-SemiBold.svg#Inter") format("svg"); /* Legacy iOS */
font-display: swap;
}
/* inter-700 - latin */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
src: url("/fonts/inter/inter-v3-latin-700.eot"); /* IE9 Compat Modes */
src: local(""), url("/fonts/inter/inter-v3-latin-700.eot?#iefix") format("embedded-opentype"), url("/fonts/inter/inter-v3-latin-700.woff2") format("woff2"), url("/fonts/inter/inter-v3-latin-700.woff") format("woff"), url("/fonts/inter/inter-v3-latin-700.ttf") format("truetype"), url("/fonts/inter/inter-v3-latin-700.svg#Inter") format("svg"); /* Legacy iOS */
font-display: swap;
}
/* inter-900 - latin */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 900;
src: url("/fonts/inter/inter-v3-latin-900.eot"); /* IE9 Compat Modes */
src: local(""), url("/fonts/inter/inter-v3-latin-900.eot?#iefix") format("embedded-opentype"), url("/fonts/inter/inter-v3-latin-900.woff2") format("woff2"), url("/fonts/inter/inter-v3-latin-900.woff") format("woff"), url("/fonts/inter/inter-v3-latin-900.ttf") format("truetype"), url("/fonts/inter/inter-v3-latin-900.svg#Inter") format("svg"); /* Legacy iOS */
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("/fonts/gilroy/Gilroy-Regular.eot");
src: local("Gilroy Regular"), local("Gilroy-Regular"), url("/fonts/gilroy/Gilroy-Regular.eot?#iefix") format("embedded-opentype"), url("/fonts/gilroy/Gilroy-Regular.woff2") format("woff2"), url("/fonts/gilroy/Gilroy-Regular.woff") format("woff"), url("/fonts/gilroy/Gilroy-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("/fonts/gilroy/Gilroy-Semibold.eot");
src: local("Gilroy Semibold"), local("Gilroy-Semibold"), url("/fonts/gilroy/Gilroy-Semibold.eot?#iefix") format("embedded-opentype"), url("/fonts/gilroy/Gilroy-Semibold.woff2") format("woff2"), url("/fonts/gilroy/Gilroy-Semibold.woff") format("woff"), url("/fonts/gilroy/Gilroy-Semibold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("/fonts/gilroy/Gilroy-Bold.eot");
src: local("Gilroy Bold"), local("Gilroy-Bold"), url("/fonts/gilroy/Gilroy-Bold.eot?#iefix") format("embedded-opentype"), url("/fonts/gilroy/Gilroy-Bold.woff2") format("woff2"), url("/fonts/gilroy/Gilroy-Bold.woff") format("woff"), url("/fonts/gilroy/Gilroy-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("/fonts/gilroy/Gilroy-Extrabold.eot");
src: local("Gilroy Extrabold"), local("Gilroy-Extrabold"), url("/fonts/gilroy/Gilroy-Extrabold.eot?#iefix") format("embedded-opentype"), url("/fonts/gilroy/Gilroy-Extrabold.woff2") format("woff2"), url("/fonts/gilroy/Gilroy-Extrabold.woff") format("woff"), url("/fonts/gilroy/Gilroy-Extrabold.ttf") format("truetype");
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* 4 - Layout elements
* Design patterns (e.g. grids or media object)
=========================================================== */
/*==========================================================================
* Bisection
* ========================================================================== */
@media screen and (min-width: 800px) {
.l-bisection {
display: -ms-grid;
display: grid;
grid-template-columns: 1fr 50px 1fr;
align-items: center;
}
}
.l-bisection__item {
grid-column: 1;
}
.l-bisection__item:nth-child(2) {
grid-column: 3;
}
@media screen and (max-width: 799px) {
.l-bisection__item + .l-bisection__item {
margin-top: 60px;
}
}
/**
* Modifiers for the bisection
*/
@media screen and (min-width: 800px) {
.l-bisection--reversed {
direction: rtl;
}
.l-bisection--reversed > * {
direction: ltr;
}
}
.l-bisection--align-start {
align-items: start;
}
.l-bisection--pt {
padding-top: 45px;
}
/*==========================================================================
* Grid
* ========================================================================== */
/**
* Constrain a grid row (only when viewport is wide enough)
*/
.l-grid {
display: -ms-grid;
display: grid;
grid-template-columns: minmax(8%, 1fr) repeat(2, minmax(0, 50px)) repeat(10, minmax(0, 100px)) repeat(2, minmax(0, 50px)) minmax(8%, 1fr);
/**
* Warning message for making sure that .l-grid has only 1 child element
* This is because IE11 doesn't support grid auto placement
* and these elements won't get put on its own row in IE11, this will break the layout
*/
}
.l-grid > * {
grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 14;
grid-column: 2/span 14;
}
.l-grid > * + * {
border-radius: 4px;
border: 2px solid rgba(207, 62, 62, 0.5);
position: relative;
margin: 20px 0 0 0;
padding: 20px 20px 40px;
background: rgba(207, 62, 62, 0.05);
overflow: hidden;
}
.l-grid > * + *::after {
content: "The '.l-grid' container can only contain 1 -moz-element because IE11 doesn't support auto placement";
content: "The '.l-grid' container can only contain 1 element because IE11 doesn't support auto placement";
padding: 2px 7px;
background: #cf3e3e;
color: #c4c4c4;
position: absolute;
right: 0;
bottom: 0;
}
@media screen and (min-width: 1320px) {
.l-grid--constrain > * {
-ms-grid-column: 3;
-ms-grid-column-span: 12;
grid-column: 3/15;
}
}
.l-grid--large {
grid-template-columns: 0 repeat(2, minmax(0, 60px)) repeat(10, minmax(0, 120px)) repeat(2, minmax(0, 60px)) 0;
}
@media screen and (min-width: 1150px) {
.l-grid--large {
grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 60px)) repeat(10, minmax(0, 120px)) repeat(2, minmax(0, 60px)) minmax(4%, 1fr);
}
}
/*==========================================================================
* Matrix grid
*
* The matrix layout is a stacked list if items on small viewports
* When enough room is available it will put 2 items on a row
* The maximum number of items in a row is 3, then it wraps to the next row.
* ========================================================================== */
/**
* Magic numbers to make the gutter a percentage value so it scales nicely
* Value is based on the largest possible width of the container,
* with the negative margin on the component taken into account
*/
.l-matrix {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
list-style: none;
}
.l-matrix__item {
display: flex;
align-items: stretch;
flex-direction: row;
max-width: 350px;
width: 100%;
}
@media screen and (max-width: 767px) {
.l-matrix__item + .l-matrix__item {
margin-top: 6vh;
}
.l-matrix--mobile-divider .l-matrix__item + .l-matrix__item {
margin-top: 8vh;
}
}
@media screen and (min-width: 768px) {
.l-matrix {
flex-wrap: wrap;
display: flex;
align-items: stretch;
flex-direction: row;
margin: -3.87%;
}
.l-matrix-slider {
display: flex;
align-items: stretch;
flex-direction: row;
margin: -3.87%;
}
.l-matrix__item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 25.5933333333%;
min-width: 258px;
margin: 3.87%;
}
.l-matrix--dense {
margin: -2.8773%;
}
.l-matrix--dense .l-matrix__item {
flex-basis: 27.5787333333%;
margin: 2.8773%;
}
.l-matrix--center .l-matrix__item {
align-items: center;
}
}
@media screen and (max-width: 767px) {
.l-matrix--mobile-divider .l-matrix__item {
position: relative;
}
.l-matrix--mobile-divider .l-matrix__item + .l-matrix__item:before {
content: "";
position: absolute;
left: 0;
top: -4vh;
width: 100%;
height: 1px;
background-color: #F6F8F9;
}
}
@media screen and (min-width: 850px) {
.l-matrix[data-max-columns="2"] {
justify-content: space-between;
}
}
@media screen and (min-width: 950px) {
.l-matrix[data-max-columns="2"] {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
}
.l-matrix[data-max-columns="2"] .l-matrix__item {
flex: 1 1 auto;
max-width: 350px;
}
@media screen and (min-width: 1040px) {
.l-matrix.l-matrix--half .l-matrix__item {
flex-basis: calc(50% - 32px) !important;
}
}
@media screen and (max-width: 767px) {
.l-matrix__item--slide + .l-matrix__item--slide {
margin-top: 0vh;
}
.l-matrix--mobile-divider .l-matrix__item--slide + .l-matrix__item--slide {
margin-top: 0vh;
}
}
/*===============================================================================
* Split layout in 2 equal columns that are stacked until viewport is wide enough
* ============================================================================== */
.l-split {
display: -ms-grid;
display: grid;
grid-template-columns: minmax(8%, 1fr) minmax(0, 575px) 50px minmax(0, 575px) minmax(8%, 1fr);
}
@media screen and (max-width: 999px) {
.l-split__column {
-ms-grid-column: 1;
-ms-grid-column-span: 5;
grid-column: 1/6;
grid-row: 1;
padding: 0 8%;
}
.l-split__column:last-child {
grid-row: 2;
margin-top: 40px;
}
}
@media screen and (min-width: 1000px) {
.l-split__column {
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-column: 2/3;
}
.l-split__column:last-child {
-ms-grid-column: 4;
-ms-grid-column-span: 1;
grid-column: 4/5;
}
}
.l-split__column--flex-start {
align-self: flex-start;
}
.l-split__column--bg {
padding: 40px 8%;
background-color: #202121;
}
@media screen and (min-width: 1000px) {
.l-split__column--bg {
padding-left: 12%;
padding-right: 12%;
}
}
@media screen and (max-width: 999px) {
.l-split--invert-on-mobile .l-split__column {
grid-row: 2;
}
.l-split--invert-on-mobile .l-split__column:last-child {
grid-row: 1;
margin-top: 0;
margin-bottom: 40px;
}
}
/* 5 - COMPONENTS
* Discrete complete chunks of UI.
* Designed components
=========================================================== */
/** ==========================================================================
* Components
* =========================================================================*/
.c-accordion {
margin: 0;
padding: 0;
list-style: none;
}
.c-accordion__item + .c-accordion__item {
border-top: 1px solid #F6F8F9;
}
.c-accordion__title {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
padding: 20px 20px 20px 0;
cursor: pointer;
color: #202121;
}
.c-accordion__icon {
flex: 0 0 auto;
color: #FF6729;
transform: rotate(-90deg);
transition: transform 0.35s ease-out;
}
.c-accordion__item.is-active .c-accordion__icon {
transform: translateY(-2px);
}
.c-accordion__heading {
font-size: 1.25rem;
line-height: 1.4;
font-weight: 700;
margin: 0;
padding-left: 40px;
transition: color 0.25s;
}
.on-dark .c-accordion__heading {
color: white;
}
.c-accordion__item:not(.is-active):hover .c-accordion__heading {
color: #FF6729;
}
/* Hidden by default*/
.c-accordion__content {
opacity: 0;
max-height: 0;
overflow: hidden;
padding-left: 50px;
padding-right: 20px;
transition: all 0.2s ease-out;
}
.c-accordion__content > * + * {
margin-top: 1.5555555556rem;
}
.c-accordion__item.is-active .c-accordion__content {
opacity: 1;
max-height: 400px;
padding-bottom: 20px;
transition: all 0.4s ease-out 0.2s;
}
.on-dark .c-accordion__content {
color: rgba(255, 255, 255, 0.8);
}
.c-alternative-hero {
z-index: 40;
position: relative;
background-color: #202121;
padding-top: 100px;
}
@media screen and (min-width: 1150px) {
.c-alternative-hero {
margin-top: -140px;
padding-top: 160px;
}
}
@media screen and (min-width: 425px) {
.c-alternative-hero {
margin-bottom: 140px;
}
}
@media screen and (min-width: 750px) {
.c-alternative-hero {
margin-bottom: 180px;
}
}
.c-alternative-hero__body {
position: relative;
text-align: center;
z-index: 1;
}
@media screen and (min-width: 425px) {
.c-alternative-hero__body {
display: -ms-grid;
display: grid;
grid-template-columns: minmax(8%, 1fr) repeat(2, minmax(0, 50px)) repeat(10, minmax(0, 100px)) repeat(2, minmax(0, 50px)) minmax(8%, 1fr);
/**
* Warning message for making sure that .l-grid has only 1 child element
* This is because IE11 doesn't support grid auto placement
* and these elements won't get put on its own row in IE11, this will break the layout
*/
}
.c-alternative-hero__body > * {
grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 14;
grid-column: 2/span 14;
}
.c-alternative-hero__body > * + * {
border-radius: 4px;
border: 2px solid rgba(207, 62, 62, 0.5);
position: relative;
margin: 20px 0 0 0;
padding: 20px 20px 40px;
background: rgba(207, 62, 62, 0.05);
overflow: hidden;
}
.c-alternative-hero__body > * + *::after {
content: "The '.l-grid' container can only contain 1 -moz-element because IE11 doesn't support auto placement";
content: "The '.l-grid' container can only contain 1 element because IE11 doesn't support auto placement";
padding: 2px 7px;
background: #cf3e3e;
color: #c4c4c4;
position: absolute;
right: 0;
bottom: 0;
}
}
@media screen and (max-width: 424px) {
.c-alternative-hero__content {
padding: 0 40px;
}
}
.c-alternative-hero__image {
display: block;
margin-top: 60px;
}
@media screen and (min-width: 425px) {
.c-alternative-hero__image {
margin-bottom: -80px;
}
.c-alternative-hero__image img {
border-radius: 16px;
box-shadow: 0 20px 30px -10px rgba(112, 123, 140, 0.2);
}
}
@media screen and (min-width: 750px) {
.c-alternative-hero__image {
margin-bottom: -120px;
}
}
@media screen and (min-width: 1150px) {
.c-alternative-hero__image {
margin-top: 80px;
}
}
@media screen and (min-width: 1200px) {
.c-alternative-hero__image {
width: 114%;
margin-left: -7%;
}
}
.c-alternative-hero__title {
font-size: 3.25rem;
line-height: 1.4423076923;
color: #ffffff;
}
.is-header-light .c-alternative-hero__title {
color: #202121;
}
@media screen and (min-width: 940px) {
body:lang(ru) .c-alternative-hero__title {
font-size: 2.8125rem;
line-height: 1.1555555556;
}
}
@media screen and (max-width: 939px) {
.c-alternative-hero__title {
font-size: 2.25rem;
}
}
@media screen and (max-width: 449px) {
.c-alternative-hero__title {
font-size: 2rem;
}
}
.c-alternative-hero__subtitle {
font-size: 2rem;
line-height: 1.125;
color: #ffffff;
margin-top: 20px;
margin-bottom: 10px;
}
.is-header-light .c-alternative-hero__subtitle {
color: #333333;
}
@media screen and (max-width: 939px) {
.c-alternative-hero__subtitle {
font-size: 1.25rem;
}
}
@media screen and (max-width: 449px) {
.c-alternative-hero__subtitle {
font-size: 1.125rem;
}
}
.c-alternative-hero__swirl {
height: 2.7976vw;
width: 100%;
position: absolute;
bottom: -1px;
left: 0;
pointer-events: none;
overflow: hidden;
}
.c-alternative-hero__swirl > svg {
position: absolute;
bottom: 0;
left: 0;
}
.c-announcements {
margin-bottom: 28px;
min-height: 66px;
}
.c-announcements > * + * {
margin-top: 3px;
}
.c-announcements__item {
display: inline-flex;
justify-content: flex-start;
align-items: flex-start;
padding: 5px 10px 5px 5px;
border-radius: 16px;
background-color: #F2F5F7;
transition: opacity 0.6s, background-color 0.2s;
opacity: 100;
}
.c-announcements__item.hidden {
visibility: hidden;
opacity: 0;
}
a.c-announcements__item {
text-decoration: none;
}
a.c-announcements__item:hover {
background-color: #E9EBF5;
}
.c-announcements__label {
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 10px;
padding: 5px 6px 3px;
border-radius: 16px;
background-color: #202121;
text-align: center;
font-size: 0.75rem;
line-height: 1;
font-weight: 700;
font-family: "Inter", sans-serif;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
}
.c-announcements__item--new .c-announcements__label {
background-color: #3ecf8e;
}
.c-announcements__item--update .c-announcements__label {
background-color: #FF6729;
}
.c-announcements__item--info .c-announcements__label {
background-color: #328dfc;
}
.c-announcements__item--alert .c-announcements__label {
background-color: #cf3e3e;
}
.c-announcements__item--warning .c-announcements__label {
background-color: #ffc90e;
}
.c-announcements__message {
font-size: 0.875rem;
line-height: 1.2142857143;
font-family: "Inter", sans-serif;
color: #333333;
padding: 1px 0 2px;
}
.c-announcements__message--pricing {
padding: 8px;
}
.c-announcements__arrow {
display: inline-block;
margin-left: 2px;
transform: translateX(0);
transition: transform 0.2s;
}
.c-announcements__arrow svg {
transform: rotate(0.75turn);
}
.c-announcements__item:hover .c-announcements__arrow {
transform: translateX(5px);
}
.c-article {
padding-bottom: 50px;
}
.c-article--no-padding {
padding-bottom: 0;
}
.c-article__header {
min-height: calc(42vmin - 140px);
}
.c-article__header--heading-only {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
min-height: calc(32vmin - 140px);
}
.c-article__hero {
display: block;
width: 100%;
text-align: center;
}
.c-article__hero img {
border-radius: 16px;
box-shadow: 0 20px 30px -10px rgba(112, 123, 140, 0.2);
}
@media screen and (min-width: 900px) {
.c-article__hero {
width: calc(100% - 16.6666666667%);
margin: 0 8.3333333333%;
}
}
@media screen and (min-width: 1060px) {
.c-article__hero {
width: calc(100% - 33.3333333333%);
margin: 0 16.6666666667%;
}
}
.c-article__heading {
font-size: 2.25rem;
line-height: 40/;
font-weight: 700;
color: #202121;
margin-inline: auto;
margin-top: 40px;
max-width: 700px;
}
.c-article__content {
position: relative;
}
@media screen and (min-width: 850px) {
.c-article__content {
min-height: 300px;
}
}
.c-article__components {
padding-bottom: 40px;
font-size: 1.125rem;
line-height: 1.6;
}
.c-article__components > * {
padding: 10px 0;
}
.c-article__components .s-text h4, .c-article__components .s-text h6 {
margin: 8px 0 16px 0;
}
.c-article__components > .c-article__image,
.c-article__components > .c-article__video {
padding: 30px 0 40px;
}
.c-article__components .s-text p.is-intro {
font-size: 1.5rem;
line-height: 1.6;
}
.c-article__text-scope > * + * {
margin-top: 1rem;
}
.c-article__text-scope h1 {
font-size: 2.5rem;
line-height: 1.15;
}
.c-article__text-scope h2 {
font-size: 2rem;
line-height: 1.1;
}
.c-article__text-scope h3 {
font-size: 1.375rem;
line-height: 1.1;
font-family: "Inter", sans-serif;
}
.c-article__text-scope h4 {
font-size: 1.25rem;
line-height: 1.4;
}
.c-article__component--grey-background {
position: relative;
background-color: #F2F5F7;
padding-top: clamp(48px, 8vw, 100px);
padding-bottom: clamp(48px, 8vw, 100px);
}
@media screen and (min-width: 450px) {
.c-article__intro {
margin: 0 8.3333333333%;
}
}
@media screen and (min-width: 840px) {
.c-article__intro {
margin: 0 16.6666666667%;
}
}
@media screen and (min-width: 1100px) {
.c-article__intro {
margin: 0 auto;
max-width: 700px;
}
}
.c-article__text,
.c-article__heading,
.c-article__menu,
.c-article__return-link,
.c-article__article-buttons {
max-width: 700px;
margin-inline: auto;
}
@media screen and (min-width: 450px) {
.c-article__text,
.c-article__heading,
.c-article__menu,
.c-article__return-link,
.c-article__article-buttons {
margin-inline: 8.3333333333%;
}
}
@media screen and (min-width: 840px) {
.c-article__text,
.c-article__heading,
.c-article__menu,
.c-article__return-link,
.c-article__article-buttons {
margin-inline: 16.6666666667%;
}
}
.c-article__menu {
margin-block: 20px;
}
.c-article__image img,
.c-article__table img,
.c-article__video img {
border-radius: 16px;
box-shadow: 0 20px 30px -10px rgba(112, 123, 140, 0.2);
}
@media screen and (min-width: 600px) {
.c-article__image,
.c-article__table,
.c-article__video {
margin: 0 4.1666666667%;
}
}
@media screen and (min-width: 840px) {
.c-article__image,
.c-article__table,
.c-article__video {
margin: 0 12.5%;
}
}
@media screen and (min-width: 1100px) {
.c-article__image,
.c-article__table,
.c-article__video {
margin: 0 auto;
max-width: 840px;
}
}
.c-article__return-link {
display: flex;
justify-content: flex-start;
align-items: center;
color: #FF6729;
border-top: 1px solid #D0DDE7;
padding-top: 32px;
text-decoration: none;
}
.c-article__return-link:hover {
text-decoration: underline;
}
.c-article__return-link-text {
margin-left: 20px;
font-size: 1.125rem;
line-height: 1.1666666667;
font-weight: 700;
}
.c-article__return-link:hover .c-icon-button {
background-color: #FF6729;
color: white;
}
.c-article__text-image {
padding: 90px 0 40px;
}
.c-article__table {
overflow-x: auto;
}
.c-article__author {
display: flex;
max-width: 700px;
margin: 0 auto;
gap: 16px;
}
.c-article__author-image {
border-radius: 50%;
width: 100px;
height: 100px;
-o-object-fit: cover;
object-fit: cover;
}
.c-article__author-info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
}
.c-article__author-name {
font-size: 20px;
font-weight: bold;
}
.c-article__author-desc {
font-size: 16px;
}
.c-article__author-desc :is(h1, h2, h3, h4, h5, h6) {
font-size: 18px !important;
}
.c-article__article-buttons {
margin-top: 20px;
}
.c-badges {
text-align: center;
}
.c-badges__title {
margin: 0 0 60px;
color: #202121;
}
.c-badges__list {
flex-wrap: wrap;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: row;
margin: -6px -12px;
}
.c-badges__item {
margin: 12px 24px;
}
.c-badges__action {
margin-top: 50px;
}
.c-badges__logo {
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: row;
height: 60px;
opacity: 0.7;
}
.c-badges__logo .iso27001 {
transform: translateY(8px);
}
.c-badges__label {
margin-top: 16px;
}
/**
* Wrapper of the main body
* - after the header, overlay-menu and the hero
* - before the footer
*/
.c-body {
z-index: 50;
position: relative;
}
.c-hero--collapse + .c-body, .c-hero--x-collapse + .c-body {
margin-top: -clamp(48px, 8vw, 100px)/1.35;
}
@media screen and (max-width: 1149px) {
.c-hero--collapse + .c-body, .c-hero--x-collapse + .c-body {
margin-top: calc(60px + 8%);
}
}
.c-body--static {
position: static;
}
.c-brick {
border-radius: 4px;
padding: 20px 25px;
background-color: #F2F5F7;
}
/* ==========================================================================
* Default button
* ========================================================================== */
/* 1. Color gets inherited and used for nested elements with 'currentColor' property */
.c-button {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: row;
border-radius: 4px;
font-size: 1rem;
line-height: 1;
font-weight: 700;
font-family: "Gilroy", sans-serif;
padding: 11px 0 9px;
border: 2px solid currentColor;
color: #202121; /* 1 */
background-color: transparent;
text-decoration: none;
cursor: pointer;
transition-property: background-color;
transition-duration: 0.3s;
}
.c-button:hover:not(:disabled) {
background-color: #202121;
border-color: #202121;
color: white;
}
.c-button:active:not(:disabled) {
transform: translateY(1px);
}
.c-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.on-dark .c-button {
color: white;
}
.on-dark .c-button:hover:not(:disabled) {
background-color: rgba(255, 255, 255, 0.1);
border-color: white;
}
.c-button.small-br {
border-radius: 4px;
}
.c-button__text {
padding: 0 22px;
text-align: center;
}
.c-button--icon-external .c-button__text {
padding-right: 30px;
}
.c-button__icon {
display: none;
position: relative;
top: -1px;
left: -4px;
margin-right: 15px;
transition: transform 0.3s;
}
.c-button:hover:not(:disabled) .c-button__icon {
transform: translateX(4px);
}
.c-button--rotate-90-icon:hover:not(:disabled) .c-button__icon {
transform: translateY(4px);
}
.c-button__icon:not(.c-button__icon--no-margin):first-child {
margin-right: 0;
margin-left: 15px;
}
.c-button--icon .c-button__icon {
display: block;
}
.c-button--rotate-90-icon .c-button__icon svg {
transform: rotate(0.25turn);
}
.c-button--icon-external .c-button__icon {
display: block;
left: 0;
transform: translateX(0) !important;
}
.c-button--video-icon .c-button__icon {
display: block;
transform: translate3d(0, 0, 0) !important;
}
.c-button--video-icon .c-button__icon svg {
width: 20px;
}
.c-button__icon--no-margin {
margin-right: 0;
}
.c-button--icon-external svg {
width: 14px;
}
.c-button--on-dark {
color: white;
}
.c-button--on-dark:hover:not(:disabled) {
background-color: rgba(255, 255, 255, 0.1);
border-color: white;
}
.c-button--filled {
border: 2px solid #202121;
color: white;
background-color: #202121;
}
.c-button--filled:hover:not(:disabled) {
border-color: #414343;
background-color: #414343;
}
.on-dark .c-button--filled {
border-color: white;
background-color: white;
color: #202121;
}
.on-dark .c-button--filled:hover:not(:disabled) {
border-color: rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.8);
color: #202121;
}
.c-button--full {
padding: 16px;
width: 100%;
}
.c-button--large {
padding-top: 16px;
padding-bottom: 13px;
}
.c-buttonrow {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
@media screen and (min-width: 1024px) {
.c-buttonrow {
flex-direction: row;
}
}
.c-buttonrow__section + .c-buttonrow__section {
margin-top: 40px;
}
@media screen and (min-width: 1024px) {
.c-buttonrow__section + .c-buttonrow__section {
margin-top: 0;
margin-left: 40px;
}
}
@media screen and (max-width: 939px) {
.c-buttonrow__section.hide-on-mobile {
display: none;
}
}
.c-buttonrow__section.hide-on-mobile + .c-buttonrow__section {
margin-top: 0;
}
.c-buttonrow__section--divider {
font-size: 0.9375rem;
color: #acb4bf;
}
.c-card {
width: 100%;
height: 100%;
}
.c-card[href] {
display: block;
text-decoration: none;
color: currentColor;
}
.c-card__image {
margin-bottom: 50px;
text-align: center;
}
.c-card--customer-story .c-card__image {
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
max-width: 165px;
margin-left: auto;
margin-right: auto;
}
.c-card__icon {
margin-top: 8px;
margin-bottom: 32px;
}
.c-card__token {
margin-bottom: 30px;
font-size: 0;
line-height: 0;
}
.c-card__token--medium {
margin-bottom: 16px;
}
.c-card__title {
font-size: 1.5rem;
line-height: 1.3333333333;
font-weight: 700;
color: #202121;
}
.c-card__body {
margin-top: 13px;
color: #3B3C3F;
}
.c-card__body.is-large {
font-size: 2rem;
line-height: 1.1875;
}
.c-card--customer-story .c-card__body.is-large {
font-size: 1.75rem;
line-height: 1.5714285714;
}
.c-card__action {
margin-top: 30px;
}
.c-card__action .c-text-button__text {
font-size: 1rem;
line-height: 1.25;
}
.c-card--box {
border-radius: 16px;
box-shadow: 0 20px 30px -10px rgba(112, 123, 140, 0.2);
background-color: #ffffff;
width: 100%;
padding: 45px;
text-align: center;
}
.c-card--box * + .c-card__title {
margin-top: 30px;
}
.c-card--box .c-card__body.is-large {
font-size: 2rem;
line-height: 1.1875;
text-align: left;
}
.c-card--box .c-card__action {
margin-top: 44px;
}
.c-card--box.c-card--customer-story {
text-align: left;
}
.c-card--box.c-card--customer-story .c-card__body {
font-size: 1.5rem;
line-height: 1.5;
}
.c-card--shadow {
border-radius: 16px;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
background-color: #ffffff;
cursor: pointer;
overflow: hidden;
transition: background-color 0.4s, box-shadow 0.4s;
}
.c-card--shadow .c-card__title {
margin-bottom: 16px;
}
.c-card--shadow .c-card__description {
font-size: 1rem;
line-height: 1.6;
}
.c-card--shadow .c-card__description--large {
font-size: 1.125rem;
line-height: 28.8px;
}
.c-card--shadow .c-card__image {
position: relative;
margin-bottom: 0;
width: 100%;
height: 0;
padding-bottom: 66.67%;
}
.c-card--shadow .c-card__img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.c-card--shadow .c-card__body {
margin-top: 0;
padding: 20px;
}
@media screen and (min-width: 400px) {
.c-card--shadow .c-card__body {
padding: 40px;
}
}
.c-card--shadow:hover {
background-color: #F2F5F7;
box-shadow: 0px 100px 80px rgba(91, 91, 91, 0.07), 0px 30.1471px 24.1177px rgba(91, 91, 91, 0.0456112), 0px 12.5216px 10.0172px rgba(91, 91, 91, 0.035), 0px 4.5288px 3.62304px rgba(91, 91, 91, 0.0243888);
}
.c-card--center .c-card__token, .c-card--center .c-card__action {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.c-card--usp {
position: relative;
padding-left: 30px;
}
.c-card--usp::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 6px;
width: 16px;
height: 14px;
background-image: url("/img/check/checked.svg");
background-size: cover;
}
.c-card--usp .c-card__body.is-large {
font-size: 2rem;
line-height: 1.1875;
}
.c-card--double-text {
text-align: left;
}
@media screen and (min-width: 800px) {
.c-card--double-text {
margin-top: -45px;
}
}
.c-card-slider__navigation {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.c-card-slider__button {
--button-size: clamp(20px, 5vw, 45px);
--button-offset: clamp(4px, 1vw, 16px);
position: relative;
width: var(--button-size);
height: var(--button-size);
padding: 0;
color: #C3C6CA;
cursor: pointer;
border: none;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s, color 0.2s;
}
.ie .c-card-slider__button {
margin-top: 15px;
}
.c-card-slider__button:active, .c-card-slider__button:focus {
outline: none;
color: #9D9F9F;
}
.c-card-slider__button:hover {
color: #202121;
}
.c-card-slider__button[disabled] {
opacity: 0.3;
}
.c-card-slider__button.next {
position: absolute;
right: calc((var(--button-size) + var(--button-offset)) * -1);
}
.c-card-slider__button.previous {
position: absolute;
left: calc((var(--button-size) + var(--button-offset)) * -1);
}
.c-card-slider--no-shadow .c-card--shadow {
box-shadow: none;
}
.c-card-slider--no-shadow .c-card--shadow:hover {
background-color: #f0f0f0;
}
.c-carousel-images {
position: relative;
margin-bottom: 40px;
}
.c-carousel-images__slider {
display: block;
}
.c-carousel-images__img {
height: 250px;
}
@media screen and (min-width: 500px) {
.c-carousel-images__img {
height: 325px;
}
}
@media screen and (min-width: 800px) {
.c-carousel-images__img {
height: 450px;
}
}
.c-carousel-images__controls {
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
}
.c-carousel-images__button {
pointer-events: all;
}
.c-carousel-images__button.c-slider__button {
color: white;
background-color: rgba(50, 141, 252, 0.4);
}
.c-carousel-images__button.c-slider__button:active, .c-carousel-images__button.c-slider__button:focus {
background-color: rgba(50, 141, 252, 0.5);
}
.c-carousel-images__button.c-slider__button:hover {
background-color: rgba(50, 141, 252, 0.6);
}
.c-carousel-images__nav {
position: absolute;
left: 0;
bottom: -40px;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
.c-carousel-images__dot {
width: 10px;
height: 10px;
margin: 5px;
border-radius: 100%;
cursor: pointer;
background-color: rgba(196, 196, 196, 0.3);
transition: background-color 0.2s;
}
.c-carousel-images__dot:hover {
background-color: rgba(255, 103, 41, 0.6);
}
.c-carousel-images__dot.tns-nav-active {
background-color: #ff6729;
}
.c-checklist {
display: flex;
flex-wrap: wrap;
gap: 12px 32px;
margin-left: 0;
list-style: none;
}
.on-dark .c-checklist {
--text-color: white;
}
.c-checklist--centered {
justify-content: center;
}
.c-checklist__item {
color: var(--text-color);
position: relative;
display: flex;
align-items: center;
gap: 4px;
}
.c-checklist__item::before {
content: "";
display: block;
width: 20px;
height: 20px;
background-color: #FF6729;
-webkit-mask-image: url("/img/checkmarkCircle.svg");
mask-image: url("/img/checkmarkCircle.svg");
}
.c-colleagues-wrapper {
overflow: hidden;
}
.c-colleagues {
flex-wrap: wrap;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin: 25px -25px 0;
}
@media screen and (min-width: 462px) {
.c-colleagues {
justify-content: space-between;
}
}
.c-colleagues__item {
margin: 25px;
}
@media screen and (min-width: 462px) {
.c-colleagues__item {
width: calc((100% - 2 * 50px) / 2);
}
}
@media screen and (min-width: 712px) {
.c-colleagues__item {
width: calc((100% - 3 * 50px) / 3);
}
.c-colleagues__item:last-child:nth-child(3n+2) {
margin-right: auto;
}
}
@media screen and (min-width: 962px) {
.c-colleagues__item {
width: calc((100% - 4 * 50px) / 4);
}
.c-colleagues__item:last-child:nth-child(4n+2), .c-colleagues__item:last-child:nth-child(4n+3) {
margin-right: auto;
}
}
.c-colleagues__image {
width: 180px;
height: 180px;
margin: auto;
border-radius: 9999px;
background-size: cover;
background-position: center;
background-color: #F6F8F9;
}
.c-colleagues__body {
margin-top: 1em;
text-align: center;
}
.c-colleagues__name {
font-size: 1.125rem;
line-height: 1;
font-weight: 700;
display: block;
color: #202121;
}
.c-colleagues__function {
font-size: 0.9375rem;
color: #333333;
}
/** ==================================================
* DISCLAIMER:
* This code is copied from the old website
* The Sass is converted to SCSS,
* and all variables and functions are changed to make it all work.
*
* Code hasn't been cleaned up, to save time,
* and to prevent having to change the HTML also.
*
* ¯\_(ツ)_/¯
====================================================*/
.compare-table {
padding: 60px 0 100px;
}
.compare-table .table {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: row;
margin-top: 60px;
}
.compare-table .table > :first-child {
border-radius: 16px 0 0 16px;
}
.compare-table .table > :last-child {
border-radius: 0 16px 16px 0;
}
.compare-table .table .option, .compare-table .table .package {
width: 20%;
padding: 0;
}
.compare-table .table .option > :last-child :last-child, .compare-table .table .package > :last-child :last-child {
margin-bottom: 30px;
}
.compare-table .table h4 {
font-size: 1.375rem;
color: #202121;
padding: 20px;
text-align: center;
}
@media screen and (max-width: 699px) {
.compare-table .table h4 {
font-size: 0.9375rem;
padding: 20px 10px;
}
}
.compare-table .table p, .compare-table .table span {
font-size: 0.9375rem;
line-height: 1.2;
height: 32px;
padding: 10px 20px;
color: #333333;
}
@media screen and (max-width: 699px) {
.compare-table .table p, .compare-table .table span {
padding: 10px 10px;
}
}
.compare-table .table p.two, .compare-table .table span.two {
height: 96px;
}
.compare-table .table p.two span, .compare-table .table span.two span {
width: 100%;
padding: 0 20px;
}
@media screen and (max-width: 699px) {
.compare-table .table p.two span, .compare-table .table span.two span {
padding: 0 10px;
}
}
.compare-table .table p.label, .compare-table .table span.label {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
margin: 30px 0 20px;
height: 40px;
padding: 10px 20px;
color: #ffffff;
background-color: black;
}
@media screen and (max-width: 699px) {
.compare-table .table p.label, .compare-table .table span.label {
padding: 10px 10px;
}
}
.compare-table .table p .check:before, .compare-table .table span .check:before {
content: "";
position: relative;
display: inline-block;
width: 12px;
height: 10px;
background: url("/img/check/checked.svg") no-repeat;
}
.compare-table .table .option {
flex: 1 0 164px;
background-color: #F2F5F7;
color: #333333;
}
.compare-table .table .option p {
color: #202121;
justify-content: flex-start;
text-align: left;
transition: all 0.4s;
}
.compare-table .table .option p.toggle {
cursor: pointer;
position: relative;
}
.compare-table .table .option p.toggle:after {
content: "";
position: absolute;
right: 16px;
top: 15px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #acb4bf;
transform: rotate(0deg);
transition: all 0.3s;
}
.compare-table .table .option p.label {
width: 400px;
position: relative;
}
.compare-table .table .option p span {
text-align: left;
display: block;
width: 100%;
padding: 10px 0;
opacity: 0;
pointer-events: none;
height: auto;
color: rgba(255, 255, 255, 0.8);
transition: all 0.3s;
}
.compare-table .table .option p span.description {
padding-top: 30px;
pointer-events: none;
}
.compare-table .table .option p.open {
height: 200px;
background-color: #1d1e1e;
}
.compare-table .table .option p.open span {
opacity: 1;
}
.compare-table .table .option p.open.toggle:after {
transform: rotate(180deg);
}
.compare-table .table .package {
text-align: center;
color: #acb4bf;
}
.compare-table .table .package:nth-of-type(2n) {
background-color: white;
}
.compare-table .table .package:nth-of-type(2n+1) {
background-color: #F2F5F7;
}
.compare-table .table .package p {
transition: all 0.4s;
}
.compare-table .table .package p.toggle {
pointer-events: none;
}
.compare-table .table .package p.open {
height: 200px;
pointer-events: none;
}
@media screen and (max-width: 549px) {
.compare-table {
display: none;
}
}
.c-compare-table {
padding: 0 0 100px;
}
@media screen and (max-width: 549px) {
.c-compare-table {
display: none;
}
}
.c-compare-table__table {
margin-top: 60px;
width: 100%;
border-collapse: collapse;
}
.c-compare-table__table tr td, .c-compare-table__table tr th {
transition: all 0.5s linear;
}
.c-compare-table__table tr td:nth-child(odd), .c-compare-table__table tr th:nth-child(odd) {
background-color: #F2F5F7;
}
.c-compare-table__table tr.is-open td, .c-compare-table__table tr.is-open th {
background-color: #EAEEF0;
}
.c-compare-table__data-row + .c-compare-table__data-row tr, .c-compare-table__data-row + .c-compare-table__data-row td {
border-top: 2px solid rgba(157, 159, 159, 0.3);
}
.c-compare-table__body {
color: #333333;
}
.c-compare-table__body tr td, .c-compare-table__body tr th {
vertical-align: top;
padding: 12px 20px;
line-height: 1.4;
}
@media screen and (min-width: 1100px) {
.c-compare-table__body tr td, .c-compare-table__body tr th {
padding: 16px 42px;
}
}
.c-compare-table__body tr td {
text-align: center;
}
.c-compare-table__heading {
width: 20%;
font-size: 1.375rem;
font-family: "Gilroy", sans-serif;
color: #202121;
padding: 40px 5px 20px;
}
@media screen and (max-width: 699px) {
.c-compare-table__heading {
font-size: 0.9375rem;
}
}
.c-compare-table__heading:first-child {
border-radius: 16px 0 0 0;
}
.c-compare-table__heading:last-child {
border-radius: 0 16px 0 0;
}
.c-compare-table__price:before {
display: inline-block;
content: attr(data-currency-symbol);
margin-right: 3px;
}
body:lang(ru) .c-compare-table__price.price_additional_user:before {
display: none;
}
body:lang(ru) .c-compare-table__price.price_additional_user:after {
display: inline-block;
content: attr(data-currency-symbol);
margin-left: 3px;
}
.c-compare-table__row-heading {
font-weight: 400;
text-align: left;
}
.c-compare-table__description {
margin-top: 10px;
font-variant: none;
max-height: 400px;
opacity: 1;
transform: translate3d(0, 0, 0);
font-size: 1rem;
line-height: 1.375;
transition: all 0.5s linear;
}
.hide-description .c-compare-table__description {
margin-top: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
transform: translate3d(0, -10px, 0);
pointer-events: none;
}
.c-compare-table__divider {
padding: 18px 42px 14px !important;
background-color: #202121 !important;
color: white;
text-align: left;
font-size: 1.25rem;
line-height: 1.2;
font-weight: 700;
font-family: "Gilroy", sans-serif;
}
.c-compare-table__check:before {
content: "";
position: relative;
display: inline-block;
width: 12px;
height: 10px;
background: url("/img/check/checked.svg") no-repeat;
}
.c-compare-table__row-heading--has-dropdown {
position: relative;
cursor: pointer;
}
.c-compare-table__row-heading--has-dropdown:after {
content: "";
position: absolute;
right: 16px;
top: 23px;
width: 13px;
height: 8px;
background: url("/img/arrowhead.svg");
transition: all 0.3s;
}
.c-compare-table__row-heading--has-dropdown.hide-description:after {
transform: rotate(0.5turn);
}
@media screen and (min-width: 800px) {
.c-component--text-image .c-image {
width: 116.6666666667%;
margin-left: -16.6666666667%;
}
.c-component--text-image .l-bisection--reversed .c-image {
margin-left: 0;
}
}
.c-cookie-bar {
position: fixed;
z-index: 100;
bottom: 0;
left: 0;
padding: 15px 0;
width: 100%;
background-color: #202121;
opacity: 1;
box-shadow: 0 -4px 6px 0 rgba(0, 0, 0, 0.2);
transition: opacity 0.5s, transform 0.6s;
transform: translate3d(0, 0, 0);
}
.c-cookie-bar.is-accepted {
display: none;
}
.c-cookie-bar.fade-out {
opacity: 0;
transform: translate3d(0, 50%, 0);
}
@media screen and (min-width: 390px) {
.c-cookie-bar__main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
}
.c-cookie-bar__text {
margin: 0;
font-size: 16px;
line-height: 1.2;
color: #ffffff;
}
@media screen and (max-width: 449px) {
.c-cookie-bar__text {
font-size: 14px;
}
}
.c-cookie-bar__link {
color: #ffffff;
transition: color 0.3s;
}
.c-cookie-bar__link:hover {
color: rgba(255, 255, 255, 0.75);
}
.c-cookie-bar__button {
display: inline-block;
padding: 5px 12px;
background-color: #FF6729;
font-size: 16px;
font-weight: 500;
color: #ffffff;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
opacity: 1;
transition: background-color 0.3s;
}
@media screen and (min-width: 390px) {
.c-cookie-bar__button {
margin-left: 15px;
}
}
@media screen and (max-width: 389px) {
.c-cookie-bar__button {
margin-top: 15px;
}
}
.c-cookie-bar__button:hover {
background-color: #cf3c00;
}
.c-cookie-overlay {
position: fixed;
z-index: 100;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
opacity: 1;
transition: opacity 0.5s;
}
.c-cookie-overlay.is-accepted {
display: none;
}
.c-cookie-overlay.fade-out {
opacity: 0;
}
.c-cookie-overlay__modal {
display: block;
width: 92%;
max-width: 960px;
padding: 60px 120px;
margin: auto;
background-color: #ffffff;
}
.c-cookie-overlay__container.is-hidden {
display: none;
}
.c-cookie-overlay__title {
font-size: 24px;
line-height: 1;
font-weight: 500;
margin: 0 0 5px;
color: #333333;
}
.c-cookie-overlay__text {
font-size: 16px;
line-height: 1.2;
margin: 0;
color: #acb4bf;
}
.c-cookie-overlay__link {
text-decoration: underline;
color: #328dfc;
cursor: pointer;
transition: color 0.3s;
}
.c-cookie-overlay__link:hover {
color: rgba(50, 141, 252, 0.75);
}
.c-cookie-overlay__button {
display: inline-block;
margin-top: 35px;
padding: 13px 25px;
border-radius: 4px;
background-color: #328dfc;
transition: background-color 0.4s;
font-size: 16px;
line-height: 1.2;
font-weight: 500;
color: #ffffff;
cursor: pointer;
outline: none;
border: none;
}
.c-cookie-overlay__button:hover {
background-color: #0a77fb;
}
.c-cookie-overlay__types, .c-cookie-overlay__settings {
margin: 30px 0;
}
.c-cookie-overlay__types > * + *, .c-cookie-overlay__settings > * + * {
margin-top: 25px;
}
.c-cookie-overlay__settings {
margin-bottom: 0;
}
.c-cookie-switch__title {
font-size: 24px;
line-height: 1;
font-weight: 500;
margin: 0 0 5px;
color: #333333;
}
.c-cookie-switch__text {
font-size: 16px;
line-height: 1.2;
margin: 0;
color: #acb4bf;
}
.c-cookie-switch__settings {
margin: 30px 0 0;
}
.c-cookie-switch__settings > * + * {
margin-top: 25px;
}
.c-cookie-switch__button {
display: inline-block;
margin-top: 35px;
padding: 13px 25px;
border-radius: 4px;
background-color: #328dfc;
transition: background-color 0.4s;
font-size: 16px;
line-height: 1.2;
font-weight: 500;
color: #ffffff;
cursor: pointer;
outline: none;
border: none;
}
.c-cookie-switch__button:hover {
background-color: #0a77fb;
}
.c-cookie-type {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: row;
width: 100%;
}
.c-cookie-type--static {
pointer-events: none;
}
.c-cookie-type__icon {
display: block;
margin: 0;
width: 26px;
height: 26px;
}
.c-cookie-type__icon svg {
width: 100%;
max-height: 26px;
}
.c-cookie-type--static .c-cookie-type__input {
opacity: 0.3;
}
.c-cookie-type__text {
margin: 0;
width: calc(100% - 55px);
font-size: 14px;
line-height: 1.2;
color: #acb4bf;
}
.c-cookie-type__title {
display: block;
margin: 0 0 5px;
font-size: 18px;
font-weight: 600;
color: #333333;
}
.c-cta {
text-align: center;
}
.c-cta__description {
max-width: 1000px;
margin: 10px auto;
}
.c-cta__usp {
margin-top: 32px;
text-align: center;
font-size: 14px;
line-height: 1.71428571;
}
.c-cta__actions {
margin-top: 50px;
}
@media screen and (min-width: 950px) {
.c-cta__actions--flex {
display: flex;
justify-content: center;
align-items: center;
}
}
@media screen and (min-width: 550px) {
.c-cta__button + .c-cta__button {
margin: 10px;
}
}
@media screen and (max-width: 549px) {
.c-cta__button + .c-cta__button {
margin-top: 10px;
}
}
@media screen and (min-width: 800px) {
.c-cta__button .c-button__text {
white-space: nowrap;
}
}
/**
* Modifier for displaying the CTA horizontally
* (only when viewport is wide enough)
*/
@media screen and (min-width: 800px) {
.c-cta--bar .c-cta__main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.c-cta--bar .c-cta__content {
flex-basis: 50%;
text-align: left;
}
.c-cta--bar .c-cta__content > * {
text-align: left !important;
}
.c-cta--bar .c-cta__actions {
display: flex;
justify-content: flex-end;
align-items: flex-end;
flex-direction: row;
flex-basis: 50%;
margin: 0 0 0 10px;
}
.c-cta--bar .c-cta__button {
margin: 0 0 0 10px;
}
}
@media screen and (min-width: 1024px) {
.c-cta--bar .c-cta__content {
flex-basis: 58.3333333333%;
}
.c-cta--bar .c-cta__actions {
flex-basis: 41.6666666667%;
}
}
.c-logos.js-customer-logo-slider {
padding: 40px 0;
}
@media screen and (min-width: 1024px) {
.c-logos {
overflow: hidden;
grid-template-columns: 1px 1fr 1px !important;
}
.c-logos .c-customer-logo-slider__button {
display: none;
}
.c-logos .c-customer-logo-slider__item--position-1,
.c-logos .c-customer-logo-slider__item--position-2,
.c-logos .c-customer-logo-slider__item--position-3,
.c-logos .c-customer-logo-slider__item--position-4,
.c-logos .c-customer-logo-slider__item--position-5 {
transform: none;
}
}
.c-logos .c-customer-logo-slider__item--position-1 {
opacity: inherit;
}
.c-logos .c-customer-logo-slider__item--position-1,
.c-logos .c-customer-logo-slider__item--position-2,
.c-logos .c-customer-logo-slider__item--position-3,
.c-logos .c-customer-logo-slider__item--position-4,
.c-logos .c-customer-logo-slider__item--position-5 {
opacity: 0.6;
}
.c-logos .c-customer-logo-slider__item--position-1:hover,
.c-logos .c-customer-logo-slider__item--position-2:hover,
.c-logos .c-customer-logo-slider__item--position-3:hover,
.c-logos .c-customer-logo-slider__item--position-4:hover,
.c-logos .c-customer-logo-slider__item--position-5:hover {
opacity: 1;
}
.c-logos__heading {
text-align: center;
color: #202121;
}
@media screen and (max-width: 939px) {
.c-logos__heading {
font-size: 1.75rem;
}
}
.c-logos__list {
flex-wrap: wrap;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
margin: 0 -2.8% 0;
}
.c-logos__list--center {
flex-wrap: wrap;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.c-logos__item {
margin: 40px 2.8%;
display: block;
width: calc((100% - 11.2%) / 2);
transition: margin 0.5s ease-in-out;
max-width: 175px;
}
.c-logos__item.is-hidden {
margin: 0 2.8%;
}
@media screen and (min-width: 650px) {
.c-logos__item {
width: calc((100% - 16.8%) / 3);
}
}
@media screen and (min-width: 950px) {
.c-logos__item {
width: calc((100% - 22.4%) / 4);
}
}
.c-logos__body {
position: relative;
width: 100%;
padding-bottom: 55%;
transition: padding 0.5s ease-in-out;
}
.is-hidden .c-logos__body {
padding-bottom: 0;
}
.c-logos__img {
position: absolute;
left: 10%;
top: 10%;
height: 80%;
width: 80%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
opacity: 0.7;
transition: all 0.4s;
}
.c-logos__img:hover {
filter: none;
-webkit-filter: grayscale(0%);
opacity: 1;
}
.c-logos__button {
margin-top: 40px;
text-align: center;
}
.c-customer-logo-slider {
display: -ms-grid;
display: grid;
grid-template-columns: 40px 1fr 40px;
align-items: center;
}
.ie .c-customer-logo-slider {
grid-template-columns: 1fr calc(100% - 120px) 1fr;
}
.c-customer-logo-slider__container {
position: relative;
width: 100%;
grid-column: 2;
opacity: 1;
transition: opacity 0.3s;
}
.c-customer-logo-slider__container.is-loading {
opacity: 0;
}
.c-customer-logo-slider__button {
position: relative;
grid-column: 1;
grid-row: 1;
width: 45px;
height: 45px;
padding: 0;
color: #C3C6CA;
cursor: pointer;
border: none;
background-color: transparent;
transition: background-color 0.2s, color 0.2s;
}
.ie .c-customer-logo-slider__button {
margin-top: 15px;
}
.c-customer-logo-slider__button:active, .c-customer-logo-slider__button:focus {
outline: none;
color: #9D9F9F;
}
.c-customer-logo-slider__button:hover {
color: #202121;
}
.c-customer-logo-slider__button[disabled] {
opacity: 0.3;
}
.c-customer-logo-slider__button.previous {
right: 15px;
}
.c-customer-logo-slider__button.next {
left: 15px;
grid-column: 3;
margin-left: auto;
}
.c-customer-logo-slider-button__icon {
position: relative;
}
.c-customer-logo-slider-button__icon svg {
transform: rotate(0.75turn);
width: 28px;
height: 16px;
}
.next .c-customer-logo-slider-button__icon {
top: -1px;
}
.next .c-customer-logo-slider-button__icon svg {
transform: rotate(0.25turn);
}
.c-customer-logo-slider__placeholder {
width: 15%;
}
.c-customer-logo-slider__placeholder:before {
content: "";
display: block;
width: 100%;
height: 0;
padding-bottom: 50%;
}
.c-customer-logo-slider__item {
position: absolute;
top: 0;
left: 0;
opacity: 0;
display: block;
width: 15%;
transform: scale3d(0, 0, 1);
transition: left 0.4s, opacity 0.4s, transform 0.4s;
transition-timing-function: ease-in-out;
}
.c-customer-logo-slider__item.is-hidden {
display: none;
pointer-events: none;
}
.c-customer-logo-slider__item--position-1 {
opacity: 1;
}
.c-customer-logo-slider__item--position-1,
.c-customer-logo-slider__item--position-5 {
transform: scale3d(0.5, 0.5, 1);
}
.c-customer-logo-slider__item--position-3 {
transform: scale3d(1, 1, 1);
}
.c-customer-logo-slider__item--position-2,
.c-customer-logo-slider__item--position-4 {
transform: scale3d(0.65, 0.65, 1);
}
.c-customer-logo-slider__item--position-2 {
left: 21.25%;
opacity: 1;
}
.c-customer-logo-slider__item--position-3 {
left: 42.5%;
opacity: 1;
}
.c-customer-logo-slider__item--position-4 {
left: 63.75%;
opacity: 1;
}
.c-customer-logo-slider__item--position-5 {
left: 85%;
opacity: 1;
}
.c-customer-logo-slider__item--pre-previous {
left: -15%;
pointer-events: none;
}
.c-customer-logo-slider__item--pre-next {
left: 100%;
pointer-events: none;
}
.c-customer-logo-slider__logo {
width: 100%;
height: 0;
padding-bottom: 50%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
opacity: 0.7;
transition: all 0.4s;
}
.c-customer-logo-slider__item:hover .c-customer-logo-slider__logo {
filter: none;
-webkit-filter: grayscale(0%);
opacity: 1;
}
@media screen and (max-width: 1099px) {
.c-customer-logo-slider__placeholder {
width: 20%;
}
.c-customer-logo-slider__item {
width: 20%;
}
.c-customer-logo-slider__item--position-2 {
left: 26.6666666667%;
}
.c-customer-logo-slider__item--position-3 {
left: 53.3333333333%;
}
.c-customer-logo-slider__item--position-4 {
left: 80%;
}
.c-customer-logo-slider__item--position-2,
.c-customer-logo-slider__item--position-3 {
transform: scale3d(1, 1, 1);
}
.c-customer-logo-slider__item--position-1,
.c-customer-logo-slider__item--position-4 {
transform: scale3d(0.65, 0.65, 1);
}
.c-customer-logo-slider__item--position-5 {
left: 100%;
pointer-events: none;
opacity: 0;
transform: scale3d(0, 0, 1);
}
}
@media screen and (max-width: 799px) {
.c-customer-logo-slider__placeholder {
width: 28%;
}
.c-customer-logo-slider__item {
width: 28%;
}
.c-customer-logo-slider__item--position-2 {
left: 36%;
}
.c-customer-logo-slider__item--position-3 {
left: 72%;
}
.c-customer-logo-slider__item--position-1,
.c-customer-logo-slider__item--position-3 {
transform: scale3d(0.65, 0.65, 1);
}
.c-customer-logo-slider__item--position-4 {
left: 100%;
pointer-events: none;
opacity: 0;
transform: scale3d(0, 0, 1);
}
}
@media screen and (max-width: 549px) {
.c-customer-logo-slider {
grid-template-columns: 20px 1fr 20px;
}
.c-customer-logo-slider__button.next {
left: 5px;
}
.c-customer-logo-slider__placeholder {
width: 30%;
}
.c-customer-logo-slider__item {
width: 30%;
}
.c-customer-logo-slider__item--position-2 {
left: 35%;
}
.c-customer-logo-slider__item--position-3 {
left: 70%;
}
}
.c-customer-story__bar {
padding: 60px 0;
background-color: #F2F5F7;
text-align: center;
}
@media screen and (max-width: 1149px) {
.c-customer-story__bar {
padding-top: 120px;
}
}
.c-customer-story__page-label {
color: #6D6F70;
text-transform: uppercase;
}
.c-customer-story__title {
margin: 24px 0 18px;
font-size: 45px;
color: #202121;
}
.c-customer-story__subtitle {
font-weight: 400;
font-size: 1.25rem;
font-family: "Inter", sans-serif;
}
.c-customer-story__side-info {
font-family: "Inter", sans-serif;
font-size: 0.75rem;
line-height: 1;
letter-spacing: 1.5px;
color: #6D6F70;
text-transform: uppercase;
text-decoration: none;
}
.c-customer-story__side-info--page-label {
background: white;
font-size: 0.75rem;
line-height: 1.75;
padding: 4px 12px;
border-radius: 14px;
color: #333333;
}
@media screen and (min-width: 1150px) {
.c-customer-story__placeholder {
display: flex;
width: 100%;
margin: 0 auto;
max-width: 1680px;
background-color: white;
box-shadow: 2px 20px 40px rgba(39, 42, 52, 0.1);
border-radius: 16px;
}
}
@media screen and (min-width: 1150px) {
.c-customer-story__intro-content,
.c-customer-story__intro-image {
width: 50%;
}
}
.c-customer-story__intro-content {
padding: 60px 8.3333333333%;
}
.c-customer-story__intro-content .s-text .is-large {
font-weight: 700;
}
@media screen and (max-width: 1149px) {
.c-customer-story__intro-content {
padding-bottom: 0;
}
.c-customer-story__intro-content .c-slider__body.s-text p.is-large {
font-size: 1.375rem;
line-height: 1.2727272727;
}
}
@media screen and (min-width: 1150px) {
.c-customer-story__intro-image {
border-radius: 16px 0 96px 16px;
overflow: hidden;
}
}
.c-customer-story__intro-image img {
width: 100%;
}
@media screen and (min-width: 1150px) {
.c-customer-story__intro-image img {
display: none;
}
}
.c-customer-story__figure {
width: 100%;
}
@media screen and (min-width: 1150px) {
.c-customer-story__figure {
height: 100%;
background-size: cover;
background-position: center;
}
.c-customer-story__figure:before {
content: "";
display: block;
width: 100%;
height: 0;
padding-bottom: 66.67%;
}
}
@media screen and (max-width: 1149px) {
.c-customer-story__figure {
background: none !important;
}
}
.c-customer-story-slider__header {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 32px 16px;
margin-bottom: clamp(24px, 5vw, 56px);
}
@media screen and (min-width: 600px) {
.c-customer-story-slider__header {
flex-direction: row;
}
}
.c-customer-story-slider__label {
font-family: "Gilroy", sans-serif;
color: #FF6729;
font-weight: bold;
margin-bottom: 8px;
}
.c-customer-story-slider__title {
font-family: "Gilroy", sans-serif;
font-size: clamp(1.5rem, 5vw, 2.5rem);
line-height: 1.2;
font-weight: bold;
color: #000000;
max-width: 612px;
}
.c-customer-story-slider__buttons {
display: flex;
gap: 8px;
margin-left: auto;
}
.c-customer-story-slider__button {
--button-bg: #FAFBFC;
--button-icon-color: #A3B5C6;
--button-border-color: var(--button-bg);
--button-bg-hover: #F0F2F5;
--button-icon-color-hover: #2f3b4d;
width: 88px;
height: 48px;
padding: 0;
color: var(--button-icon-color);
background-color: var(--button-bg);
border: 2px solid var(--button-border-color);
border-radius: 4px;
cursor: pointer;
transition: 200ms;
}
.c-customer-story-slider__button.previous {
--icon-rotate: 180deg;
}
.c-customer-story-slider__button.next {
--button-bg: transparent;
--button-icon-color: #000;
--button-border-color: #000;
--button-bg-hover: #000;
--button-icon-color-hover: #fff;
}
.c-customer-story-slider__button:hover {
--button-icon-color: var(--button-icon-color-hover);
--button-bg: var(--button-bg-hover);
}
.c-customer-story-slider__button svg {
transform: rotate(var(--icon-rotate, none));
}
.c-customer-story-slider__container {
border-radius: 16px;
box-shadow: 0 20px 30px -10px rgba(112, 123, 140, 0.2);
display: -ms-grid;
display: grid;
overflow: hidden;
}
.c-customer-story-slider__item {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: 1/1/1/1;
display: -ms-grid;
display: grid;
grid-row-gap: 16px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.c-customer-story-slider__item.is-active {
opacity: 1;
pointer-events: all;
}
@media screen and (min-width: 940px) {
.c-customer-story-slider__item {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.c-customer-story-slider__figure {
pointer-events: none;
}
.c-customer-story-slider__figure img {
aspect-ratio: 1.6;
width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 940px) {
.c-customer-story-slider__figure img {
aspect-ratio: auto;
height: 100%;
}
}
.c-customer-story-slider__content {
flex: 1;
display: flex;
flex-direction: column;
padding: clamp(16px, 8%, 48px);
}
.c-customer-story-slider__meta {
font-family: "Gilroy", sans-serif;
text-transform: uppercase;
font-size: 0.875rem;
letter-spacing: 0.07142857em;
font-weight: 600;
color: #acb4bf;
margin-bottom: clamp(16px, 4vw, 32px);
}
.c-customer-story-slider__desc {
font-family: "Gilroy", sans-serif;
font-size: clamp(1.2rem, 0.5rem + 2vw, 1.5rem);
line-height: 1.333333;
font-weight: bold;
color: #000000;
quotes: "\2018" "\2019" "\201C" "\201D";
}
.c-customer-story-slider__desc:before {
content: open-quote;
}
.c-customer-story-slider__desc:after {
content: close-quote;
}
.c-customer-story-slider__actions {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 16px 32px;
padding-top: 32px;
margin-top: auto;
}
.c-customer-story-slider__person {
margin-top: clamp(16px, 4vw, 32px);
}
.c-customer-story-slider__indicators {
display: flex;
justify-content: center;
gap: 8px;
margin-top: clamp(24px, 4vw, 32px);
}
.c-customer-story-slider__indicator {
width: 16px;
height: 16px;
margin: 0;
padding: 0;
border-radius: 100%;
border: 1px solid #E6E6E6;
cursor: pointer;
position: relative;
}
.c-customer-story-slider__indicator::before {
content: "";
display: block;
position: absolute;
inset: 3px;
border-radius: 100%;
background-color: var(--active-indicator-dot-color, transparent);
transform: scale(var(--active-indicator-dot-scale, 0));
transition: 200ms;
}
.c-customer-story-slider__indicator.is-active {
--active-indicator-dot-color: #000000;
--active-indicator-dot-scale: 1;
}
.c-description {
color: #202121;
font-size: 0.9375rem;
}
.c-description__term {
font-weight: bold;
vertical-align: middle;
}
.c-description__detail {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: row;
vertical-align: middle;
font-weight: 300;
}
.c-description__detail::before {
content: "";
display: inline-block;
width: 16px;
height: 2px;
margin: 0 12px 2px;
background-color: #FF6729;
transform: translateY(1px);
}
.c-description--equal .c-description__term,
.c-description--equal .c-description__detail {
font-size: 0.9375rem;
line-height: 1.6;
font-weight: 400;
}
.c-description--on-dark {
color: white;
}
.c-description--on-dark .c-description__detail::before {
background-color: white;
}
.c-description--invert-bold .c-description__term {
font-weight: 300;
}
.c-description--invert-bold .c-description__detail {
font-weight: bold;
}
.c-description--t-base {
font-size: 1.125rem;
}
.c-empty {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin: 20px;
text-align: center;
}
.c-empty__body {
border-radius: 4px;
font-size: 1.25rem;
font-weight: 700;
flex: 0 0 auto;
padding: 25px 40px;
background: linear-gradient(135deg, #c4c4c4, #F6F8F9);
}
.c-flash-message-container {
position: relative;
}
.c-flash-message {
border-radius: 4px;
position: absolute;
bottom: -110%;
left: 50%;
display: inline-block;
padding: 6px 8px;
background-color: #328dfc;
font-size: 0.6rem;
line-height: 1.2;
font-weight: 700;
text-transform: uppercase;
color: white;
opacity: 0;
transform: translate3d(-50%, -5px, 0);
transition-property: opacity, transform;
transition-duration: 0.3s;
}
@media screen and (min-width: 450px) {
.c-flash-message {
white-space: nowrap;
bottom: -80%;
}
}
.c-flash-message::after {
content: "";
position: absolute;
top: -8px;
left: calc(50% - 7.5px);
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 8px 7.5px;
border-color: transparent transparent #328dfc transparent;
}
.c-flash-message.clicked {
opacity: 1;
transform: translate3d(-50%, 0, 0);
}
.c-faq {
margin: 0 auto;
padding-block: clamp(48px, 8vw, 100px);
max-width: 700px;
}
.c-faq__header:has(> *) {
margin-bottom: 32px;
}
.c-faq__label {
font-family: "Gilroy", sans-serif;
color: #FF6729;
font-weight: bold;
margin-bottom: 8px;
}
.c-faq__title {
font-family: "Gilroy", sans-serif;
font-size: clamp(1.5rem, 5vw, 2.5rem);
line-height: 1.2;
font-weight: bold;
color: #000000;
max-width: 612px;
}
.c-faq__list {
list-style: none;
margin-left: 0;
}
.c-faq__item {
--arrow-color: currentColor;
}
.c-faq__item:has(:hover) {
--question-color: #626565;
}
.c-faq__item.is-active {
--question-color: #FF6729;
--answer-opacity: 1;
--answer-max-height: 600px;
--answer-transition: all 400ms ease-out 150ms;
--answer-padding-top: 8px;
--arrow-color: #FF6729;
--arrow-rotate: 0turn;
}
.c-faq__item:nth-last-child(n+2) {
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid #C3C6CA;
}
.c-faq__question {
display: flex;
gap: 16px;
align-items: baseline;
font-size: clamp(1.1rem, 4vw, 1.4rem);
font-weight: bold;
cursor: pointer;
color: var(--question-color);
transition: color 200ms;
}
.c-faq__question::after {
--size: 20px;
margin-left: auto;
flex: none;
content: "";
width: var(--size);
aspect-ratio: 1;
background-color: var(--arrow-color);
-webkit-mask-image: url("/img/arrowhead-down.svg");
mask-image: url("/img/arrowhead-down.svg");
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
rotate: var(--arrow-rotate, -0.25turn);
transition: all 200ms;
}
.c-faq__answer {
overflow: hidden;
opacity: var(--answer-opacity, 0);
max-height: var(--answer-max-height, 0);
transition: var(--answer-transition, all 150ms ease-out);
padding-top: var(--answer-padding-top);
}
/**
* Navigation in the footer that has a unique layout
*
*/
footer {
background: white;
}
.c-footer {
z-index: 20;
}
.c-footer__nav {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(24, minmax(0, 50px));
padding-bottom: 60px;
}
.c-footer__column {
margin: 70px 0 0 0;
list-style: none;
-ms-grid-column: 1;
-ms-grid-column-span: 20;
grid-column: 1/span 20;
}
@media screen and (max-width: 539px) {
.c-footer__column:nth-child(2) {
grid-row: 2;
}
.c-footer__column:nth-child(3) {
grid-row: 3;
}
.c-footer__column:nth-child(4) {
grid-row: 4;
}
}
@media screen and (min-width: 540px) and (max-width: 999px) {
.c-footer__column {
-ms-grid-column: 1;
-ms-grid-column-span: 11;
grid-column: 1/12;
}
.c-footer__column:nth-child(even) {
-ms-grid-column: 14;
-ms-grid-column-span: 9;
grid-column: 14/span 9;
}
.c-footer__column:nth-child(n+3) {
grid-row: 2;
}
}
@media screen and (min-width: 1000px) {
.c-footer__column {
-ms-grid-column: 1;
-ms-grid-column-span: 5;
grid-column: 1/6;
}
.c-footer__column:nth-child(2) {
-ms-grid-column: 9;
-ms-grid-column-span: 5;
grid-column: 9/14;
}
.c-footer__column:nth-child(3) {
-ms-grid-column: 15;
-ms-grid-column-span: 5;
grid-column: 15/20;
}
.c-footer__column:nth-child(4) {
-ms-grid-column: 21;
-ms-grid-column-span: 5;
grid-column: 21/26;
}
}
.c-footer__item {
overflow: hidden;
}
.c-footer__item--gap {
margin-top: 30px;
}
.c-footer__item--gap--language {
margin-top: 25px;
}
.c-footer__link {
font-size: 1rem;
line-height: 2;
display: inline-block;
position: relative;
color: #6D6F70;
text-decoration: none;
transition: color 0.3s;
}
.c-footer__link::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #FF6729;
transform: translate(-101%, 27px);
transition-property: transform, color;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
.c-footer__link:hover {
color: #202121;
transition-duration: 0.2s;
}
.c-footer__link:hover::before {
transform: translate(0, 27px);
transition-duration: 0.2s;
}
.c-footer__language-menu {
margin-top: -2px;
}
.c-footer__language-menu .c-language__current {
background: rgba(157, 159, 159, 0.1);
}
.c-footer__link--has-no-hover {
pointer-events: none;
}
.c-footer__link--heading {
font-size: 1.125rem;
line-height: 1.7777777778;
font-family: "Gilroy", sans-serif;
font-weight: bold;
margin-bottom: 15px;
color: #202121;
text-decoration: none;
}
.c-footer__link--heading:hover {
padding: 0;
}
.c-footer__item--gap .c-footer__link--heading {
margin-bottom: 1px;
}
/**
* Min-width for elements
* Used for automatic wrapping of rows
*/
.c-form {
border-radius: 4px;
color: #ffffff;
}
.c-form--on-light {
color: #333333;
}
.c-form__title {
font-size: 2.5rem;
line-height: 0.95;
font-weight: 700;
margin: 20px 0;
color: #ffffff;
}
.c-form__subtitle {
font-size: 1.25rem;
line-height: 1.3;
font-weight: 400;
margin: 20px 0;
color: #ffffff;
}
.c-form__row + .c-form__row {
margin-top: 20px;
}
.c-form__row + .c-form__row.c-form__row--split {
margin-top: 0;
}
.c-form__row--split {
flex-wrap: wrap;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
margin-top: 0;
margin-right: -20px;
}
.c-form__row--split > * {
flex-grow: 1;
flex-basis: 10%;
margin-top: 20px;
margin-right: 20px;
}
.c-form__error:not(:empty), .c-mailchimp-form #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error:not(:empty) {
border-radius: 4px;
font-size: 0.875rem;
display: inline-block;
margin-top: 5px;
padding: 2px 8px;
background: rgba(207, 62, 62, 0.9);
}
.c-form__element {
flex-wrap: wrap;
display: flex;
flex-direction: row;
width: 100%;
}
.c-form-element--honey {
position: fixed;
top: -100px;
height: 20px;
width: 100%;
}
.c-form__label {
font-size: 0.9375rem;
order: 1;
padding-left: 15px;
padding-bottom: 5px;
min-width: 190px;
color: rgba(255, 255, 255, 0.5);
}
.c-form__value:focus ~ .c-form__label {
color: #ffffff;
}
.c-form--on-light .c-form__value:focus ~ .c-form__label {
color: #333333;
}
.c-form--on-light .c-form__label {
color: rgba(51, 51, 51, 0.5);
}
.c-form__label__is-required:after {
content: "*";
display: inline-block;
margin-bottom: -2px;
color: #FF6729;
font-weight: bold;
font-size: 1.25rem;
}
.c-form__value {
border-radius: 4px;
order: 2;
min-width: 190px;
width: 100%;
padding: 0 15px;
line-height: 40px;
color: #333333;
background-color: rgba(255, 255, 255, 0.9);
border: 3px transparent solid;
outline: none;
}
.c-form__element--select .c-form__value {
height: 46px;
text-indent: 12px;
}
.c-form__value::-moz-placeholder {
font-size: 0.875rem;
color: #acb4bf;
-moz-transition-property: color, font-size;
transition-property: color, font-size;
transition-duration: 0.2s;
}
.c-form__value::placeholder {
font-size: 0.875rem;
color: #acb4bf;
transition-property: color, font-size;
transition-duration: 0.2s;
}
.c-form__value:focus {
box-shadow: 0 0 0 3px #264a80;
background-color: #ffffff;
}
.c-form__value:focus::-moz-placeholder {
color: #acb4bf;
}
.c-form__value:focus::placeholder {
color: #acb4bf;
}
.c-form--on-light .c-form__value:focus {
box-shadow: 0 0 0 3px #D0DDE7;
}
.c-form--on-light .c-form__value {
border-width: 1px;
border-color: #D0DDE7;
}
textarea.c-form__value {
min-height: 80px;
resize: vertical;
}
.ie input.c-form__value {
height: 46px;
}
.c-form__footer {
margin-top: 40px;
text-align: right;
}
.create-plan {
position: relative;
display: -ms-grid;
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 84px;
}
@media screen and (min-width: 1024px) {
.create-plan {
grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
}
}
.create-plan hr {
border: 1px solid #E6E6E6;
}
.create-plan .c-announcements__item {
display: none;
border-radius: 3px;
margin: 12px;
}
@media screen and (max-width: 767px) {
.create-plan .c-announcements__item {
display: initial;
}
}
.create-plan .c-announcements__item.hidden {
display: none;
}
.create-plan__title {
margin: 32px 0 24px;
letter-spacing: 1px;
font-size: 1.125rem;
line-height: 1.2222222222;
font-weight: 600;
text-transform: uppercase;
}
.create-plan__subtitle {
font-size: 1.5rem;
line-height: 1.1666666667;
font-weight: 600;
margin-bottom: 16px;
}
.create-plan__product-container > .create-plan-product {
margin-top: 32px;
}
.create-plan-product {
display: flex;
flex-direction: column;
border: 1px solid #E6E6E6;
}
@media screen and (min-width: 1024px) {
.create-plan-product {
padding: 40px 24px;
}
}
.create-plan-product__inner {
padding: 16px;
width: 100%;
display: flex;
align-items: flex-start;
}
@media screen and (max-width: 767px) {
.create-plan-product__inner .create-plan-product__button {
display: none;
}
.create-plan-product__inner .create-plan-product__button--suite {
display: block;
}
}
.create-plan-product__icon {
height: 40px;
min-width: 40px;
margin-right: 16px;
background-size: contain;
background-color: #FDF3EF;
}
[data-icon=circle] .create-plan-product__icon {
background: url("/img/circle.svg") no-repeat center;
}
[data-icon=box] .create-plan-product__icon {
background: url("/img/box.svg") no-repeat center;
}
[data-icon=balloon] .create-plan-product__icon {
background: url("/img/balloon.svg") no-repeat center;
}
[data-icon=backup] .create-plan-product__icon {
background: url("/img/backup.svg") no-repeat center;
}
[data-icon=house] .create-plan-product__icon {
background: url("/img/house.svg") no-repeat center;
}
[data-icon=layers] .create-plan-product__icon {
background: url("/img/layers.svg") no-repeat center;
}
[data-icon=location] .create-plan-product__icon {
background: url("/img/location.svg") no-repeat center;
}
[data-icon=stacks] .create-plan-product__icon {
background: url("/img/stacks.svg") no-repeat center;
}
[data-icon=support] .create-plan-product__icon {
background: url("/img/support.svg") no-repeat center;
}
.create-plan-product__meta {
flex: 1;
display: flex;
flex-direction: column;
}
@media screen and (min-width: 1024px) {
.create-plan-product__meta {
padding-right: 12px;
}
}
.create-plan-product__meta .create-plan__read-more {
margin-left: 0;
}
@media screen and (max-width: 767px) {
.create-plan-product__meta .create-plan__read-more {
display: none;
}
}
.create-plan-product__meta .create-plan__checks {
margin-bottom: 0;
}
@media screen and (max-width: 767px) {
.create-plan-product__meta .create-plan__checks {
display: none;
}
}
.create-plan-product__meta p {
margin-top: 8px;
font-size: 0.875rem;
line-height: 1.5;
font-weight: 400;
}
.create-plan-product__meta strong {
font-size: 18px;
line-height: 22px;
font-weight: 600;
}
.create-plan-product__label {
text-transform: uppercase;
font-size: 11px;
line-height: 13px;
font-weight: 500;
color: #6D6F70;
}
.create-plan-product__button {
min-width: 76px;
display: flex;
justify-content: flex-end;
position: relative;
}
.create-plan-product__button button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 2px solid #202121;
border-radius: 4px;
background-color: transparent;
font-size: 12px;
padding: 4px 8px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
}
.create-plan-product__button button > div {
height: 12px;
min-width: 12px;
margin-right: 6px;
background-position: center;
background-size: contain;
background-image: url("/img/plus.svg");
background-repeat: no-repeat;
}
.create-plan-product__button button.active {
background-color: #202121;
color: white;
}
.create-plan-product__button button.active > div {
background-image: url("/img/checked-white.svg");
}
.create-plan-product__button button.hidden {
display: none;
}
.create-plan-product__button.disabled {
color: rgba(32, 33, 33, 0.4);
cursor: not-allowed;
}
.create-plan-product__button.disabled button {
border-color: currentColor;
}
.create-plan-product__button.disabled button div {
opacity: 0.4;
}
.create-plan-product__button.disabled button {
pointer-events: none;
}
.create-plan-product__button.disabled:hover .create-plan-product__tooltip {
display: initial;
position: absolute;
transition: all 0.2s ease-out 0.05s;
}
@media screen and (max-width: 767px) {
.create-plan-product__button {
display: initial;
}
}
.create-plan-product__button--mobile {
display: none;
}
@media screen and (max-width: 767px) {
.create-plan-product__button--mobile {
display: block;
}
.create-plan-product__button--mobile .extra-price-label {
text-align: center !important;
margin-top: 8px;
margin-bottom: 24px;
}
}
.create-plan-product__dropdown-toggle {
display: none;
text-align: center;
font-size: 0.875rem;
font-weight: 500;
padding-top: 12px;
padding-bottom: 12px;
border-top: 1px solid #EAEEF0;
}
@media screen and (max-width: 539px) {
.create-plan-product__dropdown-toggle {
display: block;
}
}
.create-plan-product__dropdown-toggle img {
margin-left: 3px;
width: 12px;
}
.create-plan-product__dropdown-toggle .create-plan-product__dropdown-content {
display: none;
}
.create-plan-product__dropdown-toggle.is-open {
padding-bottom: 0;
}
.create-plan-product__dropdown-toggle.is-open img {
transform: rotate(180deg);
}
.create-plan-product__dropdown-toggle.is-open .create-plan-product__dropdown-content {
display: block;
}
.create-plan-product__dropdown-inner {
padding: 12px;
}
.create-plan-product__tooltip {
opacity: 1;
display: none;
font-size: 0.875rem;
line-height: 21px/;
position: absolute;
font-weight: 400;
width: 186px;
right: 41px;
bottom: calc(100% + 7px);
padding: 16px;
border-radius: 5px;
border: 1px solid #F6F8F9;
transform: translate(103px, -6px);
background-color: #202121;
color: white;
}
.create-plan-product__tooltip:after {
content: "";
position: absolute;
pointer-events: none;
top: 100%;
left: calc(50% - 6px);
width: 10px;
height: 10px;
border-right: 1px solid #202121;
border-bottom: 1px solid #202121;
background-color: #202121;
transform: translateY(-6px) rotate(45deg);
}
.create-plan-product__numbers {
position: relative;
outline: none;
}
.create-plan-product__numbers button {
display: flex;
height: 20px;
width: 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #F8FAFB;
border: 1px solid #EAEEF0;
box-sizing: border-box;
position: absolute;
border-radius: 0;
top: 0;
right: 0;
padding: 0;
line-height: 16px;
align-items: center;
justify-content: center;
}
.create-plan-product__numbers button:first-child {
border-top-right-radius: 4px;
}
.create-plan-product__numbers button:last-child {
bottom: 0;
top: auto;
border-bottom-right-radius: 4px;
}
.create-plan-product__numbers input {
width: 72px;
height: 40px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #EAEEF0;
border-radius: 4px;
padding: 4px 0 4px 8px;
overflow: hidden;
}
.create-plan-product__numbers input:focus, .create-plan-product__numbers input:focus-visible {
outline: none;
}
.create-plan-product__numbers input::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
}
.create-plan-product__levels {
margin: 24px 12px 12px;
display: -ms-grid;
display: grid;
grid-column-gap: 16px;
grid-row-gap: 16px;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media screen and (min-width: 768px) {
.create-plan-product__levels {
margin-left: 56px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.create-plan-product__levels ~ .create-plan__read-more {
margin-bottom: 32px;
}
}
.create-plan-product__level {
display: flex;
flex-direction: column;
padding: 16px 16px;
font-size: 13px;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: #F8FAFB;
border-radius: 4px;
border: 1.5px solid #ECEDEE;
}
@media screen and (min-width: 768px) {
.create-plan-product__level {
font-size: 17px;
padding: 24px 16px;
}
}
.create-plan-product__level.selected {
border-color: #4c4b4b;
}
.create-plan-product__level strong {
font-size: 14px;
line-height: 20px;
}
.create-plan-product__level > span {
font-size: 12px;
text-align: center;
line-height: 16px;
color: #6D6F70;
}
@media screen and (min-width: 768px) {
.create-plan-product__level > span {
font-size: 14px;
}
}
.create-plan__sidebar {
box-shadow: 1px 4px 7px 1px rgba(0, 0, 0, 0.1);
border-radius: 4px;
align-self: flex-start;
}
@media screen and (max-width: 1023px) {
.create-plan__sidebar {
margin-top: 32px;
}
}
.create-plan__heading {
padding: 16px 16px;
text-transform: uppercase;
font-size: 0.875rem;
line-height: 1.2857142857;
font-weight: 500;
border-bottom: 1px solid #E6E6E6;
margin-bottom: 16px;
}
.create-plan__cart-overview {
padding: 0 16px 16px 16px;
}
.create-plan__cart-product {
position: relative;
display: flex;
flex-direction: column;
padding: 16px;
background-color: #F8FAFB;
border-radius: 4px;
margin-bottom: 16px;
}
.create-plan__cart-product .cart-level {
text-transform: uppercase;
}
.create-plan__cart-product strong {
font-size: 16px;
line-height: 20px;
margin-bottom: 2px;
}
.create-plan__cart-product .create-plan__cart-label {
font-size: 12px;
line-height: 17px;
}
.create-plan__cart-product > div {
font-size: 0.875rem;
line-height: 1.2857142857;
font-weight: 400;
}
.create-plan__cart-label {
font-size: 12px;
line-height: 17px;
}
.create-plan__cart-close {
height: 12px;
width: 12px;
position: absolute;
top: 16px;
right: 16px;
background: url("/img/unchecked.svg") center no-repeat;
background-size: contain;
cursor: pointer;
}
.footer-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.create-plan__footer {
padding: 16px 16px;
border-top: 1px solid #E6E6E6;
}
.create-plan__footer .footer-subtotal {
font-size: 0.875rem;
line-height: 24/;
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.create-plan__footer .footer-total {
font-size: 1rem;
line-height: 1.5;
font-weight: 600;
display: flex;
justify-content: space-between;
margin-top: 16px;
margin-bottom: 24px;
}
.create-plan__footer .c-button {
width: 100%;
border-radius: 4px;
}
.create-plan__footer .c-button:first-of-type {
margin-bottom: 16px;
}
.create-plan__footer--no-bt {
border-top: none;
}
.create-plan__pricing-page .tab-container {
display: none;
}
.create-plan__pricing-page .tab-container.active {
display: -ms-grid;
display: grid;
}
.custom-plan-notice {
border: 1.5px solid #202121;
border-radius: 3px;
background: #F9FAFB;
margin: 16px 0 24px;
padding: 24px;
}
.custom-plan-notice h4 {
font-family: "Gilroy", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 18px;
}
.custom-plan-notice p {
margin-top: 8px;
font-family: "Inter", sans-serif;
font-style: normal;
font-weight: normal;
font-size: 12px;
}
.create-plan__checks {
list-style: none;
margin: 20px 0 20px 0;
}
.create-plan__checks li {
position: relative;
display: inline-flex;
padding-left: 20px;
font-size: 14px;
line-height: 22px;
margin-right: 16px;
margin-bottom: 8px;
}
.create-plan__checks li:before {
content: "";
position: absolute;
left: 0;
top: 4px;
height: 14px;
width: 14px;
background: url("/img/checked.svg") no-repeat center;
}
.create-plan__checks--mobile li {
font-weight: 400;
}
.create-plan-additional-products {
margin-bottom: 32px;
}
.create-plan-additional-products__heading {
padding: 16px;
padding-right: 42px;
font-size: 14px;
line-height: 21px;
border: 1px solid #E6E6E6;
border-top: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background: url("/img/arrowhead-down.svg") no-repeat;
background-position: top 22px right 24px;
background-size: 12px;
}
.container-open .create-plan-additional-products__heading {
background-image: url("/img/arrowhead.svg");
}
@media screen and (min-width: 1024px) {
.create-plan-additional-products__heading {
padding: 16px 24px;
}
}
.create-plan-additional-products__inner {
max-height: 0;
overflow: hidden;
}
.container-open .create-plan-additional-products__inner {
max-height: 100%;
overflow: visible;
}
.create-plan-additional-products__inner .create-plan-product {
padding-top: 24px;
padding-bottom: 24px;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
padding-left: 16px;
border-left: 8px solid #FDF3EF;
}
.create-plan-additional-products__inner .create-plan-product:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
@media screen and (max-width: 539px) {
.create-plan-additional-products__inner .create-plan-product {
padding: 0;
}
}
.create-plan__read-more {
display: flex;
align-items: center;
text-decoration: none;
font-size: 14px;
line-height: 20px;
font-weight: 500;
margin-top: 24px;
color: #FF6729;
cursor: pointer;
margin-left: 72px;
}
@media screen and (max-width: 767px) {
.create-plan__read-more {
display: none;
}
}
.create-plan__read-more > span {
display: flex;
height: 12px;
width: 12px;
margin-left: 8px;
background: url("/img/arrow-right.svg") no-repeat center;
background-size: contain;
}
@media screen and (max-width: 767px) {
.create-plan__read-more--mobile {
font-size: 0.875rem;
line-height: 14/;
font-weight: 500;
display: block;
border-top: 1px solid #EAEEF0;
padding: 12px;
margin-top: 0;
margin-left: 0;
}
.create-plan__read-more--mobile > span {
display: inline-block;
transform: translateY(1px);
}
}
.create-plan__sidebar--mobile {
position: fixed;
width: 100%;
background-color: white;
padding: 16px;
z-index: 99;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
bottom: 0;
left: 0;
box-shadow: 0px -4px 15px 2px rgba(0, 0, 0, 0.2);
}
.create-plan__sidebar--mobile .c-button {
width: auto;
border-radius: 4px;
}
@media screen and (min-width: 1024px) {
.create-plan__sidebar--mobile {
display: none;
}
}
.create-plan__scroll-up {
position: absolute;
bottom: 0;
right: 0;
font-size: 12px;
padding: 8px;
text-decoration: underline;
cursor: pointer;
padding-left: 20px;
background-image: url("/img/arrowhead.svg");
background-size: 10px;
background-repeat: no-repeat;
background-position: left center;
}
@media screen and (max-width: 1023px) {
.create-plan__scroll-up {
display: none;
}
}
.create-plan--small-label {
font-size: 14px;
line-height: 21px;
}
.create-plan__core-product .create-plan__read-more {
margin-left: 0;
margin-bottom: 36px;
}
.create-plan__description {
font-size: 0.875rem;
}
.c-header {
z-index: 60;
display: -ms-grid;
display: grid;
grid-template-columns: minmax(8%, 1fr) repeat(2, minmax(0, 50px)) repeat(10, minmax(0, 100px)) repeat(2, minmax(0, 50px)) minmax(8%, 1fr);
/**
* Warning message for making sure that .l-grid has only 1 child element
* This is because IE11 doesn't support grid auto placement
* and these elements won't get put on its own row in IE11, this will break the layout
*/
position: relative;
padding: 16px 0;
}
.c-header > * {
grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 14;
grid-column: 2/span 14;
}
.c-header > * + * {
border-radius: 4px;
border: 2px solid rgba(207, 62, 62, 0.5);
position: relative;
margin: 20px 0 0 0;
padding: 20px 20px 40px;
background: rgba(207, 62, 62, 0.05);
overflow: hidden;
}
.c-header > * + *::after {
content: "The '.l-grid' container can only contain 1 -moz-element because IE11 doesn't support auto placement";
content: "The '.l-grid' container can only contain 1 element because IE11 doesn't support auto placement";
padding: 2px 7px;
background: #cf3e3e;
color: #c4c4c4;
position: absolute;
right: 0;
bottom: 0;
}
@media screen and (min-width: 1150px) and (max-width: 1199px) {
.c-header {
display: block;
padding: 0 20px;
}
}
@media screen and (max-width: 1149px) {
.c-header {
display: none;
}
}
.c-header ul {
margin-left: 0;
list-style: none;
}
.c-header--sticky {
position: fixed;
top: 0;
width: 100%;
padding: 10px 0;
margin: 0;
background-color: white;
box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.1);
transform: translateY(-110px);
transition: transform 0.4s ease-in;
}
.is-sticky-header-visible .c-header--sticky {
transform: none;
transition-timing-function: ease-out;
}
.c-header__main {
display: flex;
align-items: center;
}
.c-header__logo img {
width: 54px;
height: 54px;
}
@media screen and (min-width: 1350px) {
.c-header__logo img {
width: 66px;
height: 66px;
}
}
.c-header__nav {
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
margin-left: 20px;
}
@media screen and (min-width: 1350px) {
.c-header__nav {
margin-left: 62px;
}
}
.c-header__actions {
display: flex;
align-items: center;
}
.c-header__actions > * + * {
margin-left: 20px;
}
@media screen and (min-width: 1350px) {
.c-header__actions > * + * {
margin-left: 34px;
}
}
.c-header__actions .c-button__text {
font-size: 0.875rem;
}
@media screen and (min-width: 1200px) {
.c-header__actions .c-button__text {
font-size: 1rem;
}
}
@media screen and (max-width: 1049px) {
body:lang(es) .c-header__actions > * + * {
margin-left: 10px !important;
}
}
.c-header__menu {
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c-header__menu > * + * {
margin-left: 12px;
}
@media screen and (max-width: 1049px) {
body:lang(es) .c-header__menu > * + * {
margin-left: 5px !important;
}
}
.c-header__link {
--link-color: #6D6E6F;
--link-bg-color: transparent;
--link-color-hover: #202121;
--link-bg-color-hover: #F2F5F7;
font-size: 0.9375rem;
font-family: "Inter", sans-serif;
display: inline-block;
padding-block: 6px;
padding-inline: 12px;
font-weight: 500;
text-decoration: none;
border-radius: 4px;
color: var(--link-color);
background-color: var(--link-bg-color);
}
@media screen and (min-width: 1200px) {
.c-header__link {
font-size: 1rem;
}
}
.c-header__item:has(.c-header__link):hover .c-header__link {
--link-color: var(--link-color-hover);
--link-bg-color: var(--link-bg-color-hover);
}
.is-header-light .c-header__link {
--link-color: white;
--link-bg-color-hover: rgba(255,255,255,0.85);
}
.c-header--sticky .c-header__link {
--link-color: palette(secondary);
}
.c-header__external {
position: relative;
top: -1px;
margin-left: 10px;
color: #737D87;
}
.c-header__external svg {
width: 14px;
}
.c-header__link--npe > * {
pointer-events: none;
}
.c-header__dropdown-icon {
margin-left: 4px;
}
.c-header__dropdown-icon svg {
width: 11px;
height: 8px;
}
.c-header__languages {
margin-left: 20px;
}
.c-header--sticky .c-header__languages {
display: none;
}
@media screen and (max-width: 1199px) {
body:lang(es) .c-header__languages {
margin-left: 10px;
}
}
.c-header__item {
position: relative;
cursor: pointer;
padding-block: 10px;
}
.c-header__submenu {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 360px;
background-color: #fff;
border: 1px solid #EAEDF4;
border-radius: 4px;
box-shadow: 0 4.529px 3.623px 0 rgba(91, 91, 91, 0.02), 0 12.522px 10.017px 0 rgba(91, 91, 91, 0.04), 0 30.147px 24.118px 0 rgba(91, 91, 91, 0.05), 0 100px 80px 0 rgba(91, 91, 91, 0.07);
}
.is-hoverable-item:hover .c-header__submenu {
display: block;
}
.c-header__sublist.has-more-padding-bottom {
padding-bottom: 24px;
}
.c-header__sublink {
display: flex;
align-items: center;
gap: 16px;
padding: 24px;
color: #202121;
text-decoration: none;
text-underline-offset: 0.25em;
transition: all 200ms linear;
}
.c-header__sublink.is-dense {
padding-block: 12px;
}
.c-header__sublink:hover {
--chevron-translate-x: 25%;
--subtitle-text-decoration: underline;
color: #FF6729;
background-color: #F2F5F7;
}
.c-header__sublink svg {
flex: none;
width: 24px;
height: 24px;
color: currentColor;
margin-left: auto;
transform: translateX(var(--chevron-translate-x));
transition: transform 275ms ease-out;
}
.c-header__subcontent {
display: -ms-grid;
display: grid;
gap: 4px;
}
.c-header__subname {
font-size: 1rem;
line-height: 1.25;
font-weight: 500;
color: currentColor;
-webkit-text-decoration: var(--subtitle-text-decoration);
text-decoration: var(--subtitle-text-decoration);
}
.c-header__subdescription {
font-size: 0.875rem;
font-weight: 400;
line-height: 1.42857;
letter-spacing: 0.2px;
color: #6D6E6F;
}
.c-header__subsubmenu-item .c-header__dropdown-icon {
float: right;
margin-top: -1px;
margin-left: 8px;
}
.c-header__subsubmenu-item .c-header__dropdown-icon svg {
transform: rotate(270deg);
}
.c-header__subsubmenu-item > .c-header__sublink {
position: relative;
}
.c-header__subsubmenu-item > .c-header__sublink:before {
content: "";
position: absolute;
left: 100%;
top: 0;
bottom: 0;
width: 24px;
}
.c-header__subsubmenu {
position: absolute;
left: 380px;
top: 0;
min-height: 100%;
width: 380px;
padding: 35px 24px;
background-color: #F3F6FB;
border-radius: 0 4px 4px 0;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.c-header__subsubmenu.is-open {
opacity: 1;
pointer-events: all;
}
.c-header__subheading {
font-size: 0.75rem;
text-transform: uppercase;
line-height: 1.2;
letter-spacing: 0.15em;
color: #A2A8AE;
padding: 0 24px;
margin-top: 24px;
margin-bottom: 8px;
}
.c-heading {
margin: auto;
text-align: center;
}
.c-heading__title {
margin: 0 0 14px;
color: #202121;
}
.on-dark .c-heading__title {
color: white;
}
.c-heading__subtitle {
width: 100%;
max-width: 800px;
margin: 0 auto;
color: #333333;
}
.on-dark .c-heading__subtitle {
color: rgba(255, 255, 255, 0.8);
}
/**
* MODIFIERS
*/
.c-heading--is-inverted {
display: flex;
flex-direction: column-reverse;
}
.c-heading--is-inverted .c-heading__title {
margin: 14px 0 0;
}
@media screen and (min-width: 786px) {
.c-heading--large .c-heading__title {
font-size: 3.25rem;
}
.c-heading--large .c-heading__subtitle {
font-size: 2.5rem;
line-height: 0.9;
}
}
/** =====================================================================
* This Hero component is NOT re-usable for other projects then Rentman,
* despite the 'settings' it is fixed for the specific Rentman design
* ================================================================== */
.c-hero {
z-index: 40;
position: relative;
}
.is-header-light .c-hero {
background-color: #202121;
}
#customers .c-hero {
padding-bottom: 5.0223vw;
}
.c-hero:not(.c-hero--no-pull) {
padding-top: 120px;
padding-bottom: calc(2.7976vw + 60px + 30px);
}
@media screen and (min-width: 1150px) {
.c-hero:not(.c-hero--no-pull) {
margin-top: -140px;
padding-top: 220px;
padding-bottom: calc(2.7976vw + 150px);
}
}
.c-hero--small-text .c-hero__text p, .c-hero--small-text .c-hero__text ul {
font-size: 1.125rem;
}
@media screen and (max-width: 1149px) {
.c-hero.c-hero--partial {
display: flex;
flex-direction: column-reverse;
padding-bottom: 0;
}
}
@media screen and (min-width: 1150px) {
.c-hero.c-hero--partial {
padding-bottom: 80px;
}
}
.c-hero--no-padding-bottom {
padding-bottom: 0 !important;
}
.c-hero--pull-up-small {
margin-bottom: calc(-110px);
padding-bottom: calc(60px + 110px + 2.7976vw);
}
@media screen and (min-width: 1150px) {
.c-hero--pull-up-small {
padding-bottom: calc(250px + 2.7976vw);
}
}
.c-hero--pull-up {
margin-bottom: calc(-220px);
padding-bottom: calc(60px + 220px + 2.7976vw);
}
@media screen and (min-width: 1150px) {
.c-hero--pull-up {
padding-bottom: calc(250px + 2.7976vw);
}
}
.c-hero--pull-up-more {
margin-bottom: calc(-60px - 240px);
padding-bottom: calc(240px + 2.7976vw);
}
@media screen and (min-width: 1150px) {
.c-hero--pull-up-more {
padding-bottom: calc(90px + 240px + 2.7976vw);
}
}
.c-hero--book-a-demo {
padding-top: 120px;
margin-bottom: -80px;
}
@media screen and (max-width: 939px) {
.c-hero--book-a-demo {
margin-bottom: -40px;
}
}
@media screen and (min-width: 1150px) {
.c-hero--book-a-demo {
margin-top: -140px;
padding-top: 220px;
}
}
.c-hero--less-space-till-blocks {
margin-bottom: -285px;
}
.c-hero--collapse {
position: absolute;
top: 0;
width: 100%;
height: 42vmin;
margin: 0;
padding: 0;
}
.c-hero--x-collapse {
position: absolute;
top: 0;
width: 100%;
height: 32vmin;
margin: 0;
padding: 0;
}
.c-hero--light-bg {
background-color: #F2F5F7;
}
.c-hero--simple {
margin-top: 100px;
margin-bottom: 100px;
}
.c-hero__images {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: -ms-grid;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.c-hero--impression .c-hero__images {
overflow: hidden;
opacity: 0.6;
}
.c-hero--partial .c-hero__images {
height: 350px;
position: relative;
}
@media screen and (min-width: 1150px) {
.c-hero--partial .c-hero__images {
position: absolute;
left: 60%;
height: auto;
}
}
.c-hero__figure {
position: absolute;
width: 100%;
height: 100%;
grid-row: 1;
grid-column: 1;
opacity: 0;
transition: opacity 0.8s;
}
.c-hero__figure.is-active {
opacity: 1;
}
.c-hero--blur .c-hero__figure {
overflow: hidden;
filter: blur(3px);
}
.c-hero__image {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
display: none;
}
@media screen and (max-width: 819px) {
.c-hero__image--medium {
display: block;
}
}
@media screen and (min-width: 820px) and (max-width: 1459px) {
.c-hero__image--large {
display: block;
}
}
@media screen and (min-width: 1460px) {
.c-hero__image--huge {
display: block;
}
}
.c-hero__body {
display: -ms-grid;
display: grid;
grid-template-columns: minmax(8%, 1fr) repeat(2, minmax(0, 50px)) repeat(10, minmax(0, 100px)) repeat(2, minmax(0, 50px)) minmax(8%, 1fr);
/**
* Warning message for making sure that .l-grid has only 1 child element
* This is because IE11 doesn't support grid auto placement
* and these elements won't get put on its own row in IE11, this will break the layout
*/
position: relative;
z-index: 1;
}
.c-hero__body > * {
grid-row: 1;
-ms-grid-column: 2;
-ms-grid-column-span: 14;
grid-column: 2/span 14;
}
.c-hero__body > * + * {
border-radius: 4px;
border: 2px solid rgba(207, 62, 62, 0.5);
position: relative;
margin: 20px 0 0 0;
padding: 20px 20px 40px;
background: rgba(207, 62, 62, 0.05);
overflow: hidden;
}
.c-hero__body > * + *::after {
content: "The '.l-grid' container can only contain 1 -moz-element because IE11 doesn't support auto placement";
content: "The '.l-grid' container can only contain 1 element because IE11 doesn't support auto placement";
padding: 2px 7px;
background: #cf3e3e;
color: #c4c4c4;
position: absolute;
right: 0;
bottom: 0;
}
.c-hero--tight .c-hero__body {
margin-bottom: -60px;
}
@media screen and (min-width: 1150px) {
.c-hero--tight .c-hero__body {
margin-bottom: -120px;
}
}
.c-hero--tighter .c-hero__body {
margin-bottom: -100px;
}
@media screen and (min-width: 1150px) {
.c-hero--tighter .c-hero__body {
margin-bottom: -120px;
}
}
@media screen and (min-width: 1320px) {
.c-hero__body--constrain > * {
-ms-grid-column: 3;
-ms-grid-column-span: 12;
grid-column: 3/15;
}
}
.c-hero__body--asym .c-hero__text {
text-align: left;
margin: 0 0 40px;
}
@media screen and (min-width: 940px) {
.c-hero__body--asym .c-hero__text {
width: 60%;
}
}
.c-hero__heading {
text-align: center;
}
.c-hero__title {
font-size: 3.25rem;
line-height: 1.4423076923;
color: #202121;
}
.on-dark .c-hero__title {
color: white;
}
@media screen and (min-width: 940px) {
body:lang(ru) .c-hero__title {
font-size: 2.8125rem;
line-height: 1.1555555556;
}
}
@media screen and (min-width: 940px) {
#about .c-hero__title {
font-size: 3rem;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
}
@media screen and (max-width: 939px) {
.c-hero__title {
font-size: 2.25rem;
}
}
@media screen and (max-width: 449px) {
.c-hero__title {
font-size: 2rem;
}
}
.c-hero__title--small {
font-size: 2.8125rem;
line-height: 1.2444444444;
}
@media screen and (max-width: 939px) {
.c-hero__title--small {
font-size: 1.75rem;
}
}
@media screen and (max-width: 449px) {
.c-hero__title--small {
font-size: 1.625rem;
}
}
.c-hero__subtitle {
font-size: 1.25rem;
line-height: 1.5;
color: #202121;
margin-top: 12px;
margin-bottom: 10px;
}
.on-dark .c-hero__subtitle {
color: white;
}
@media screen and (max-width: 939px) {
.c-hero__subtitle {
font-size: 1.25rem;
}
}
@media screen and (max-width: 449px) {
.c-hero__subtitle {
font-size: 1.125rem;
}
}
.c-hero__subtitle--small {
margin-top: 15px;
font-size: 1.125rem;
line-height: 1.5555555556;
}
.c-hero__buttons {
margin-top: 30px;
}
@media screen and (min-width: 650px) {
.c-hero__buttons {
display: flex;
align-items: center;
justify-content: center;
}
}
.c-hero__buttons > * {
margin: 10px;
}
.c-hero__action {
margin: 30px 0 10px;
}
.c-hero__form-area {
margin-top: 30px;
}
.c-hero__form {
position: relative;
margin: auto;
max-width: 270px;
}
.c-hero__form-value {
border-color: #FF6729;
border-radius: 25px;
font-size: 1rem;
line-height: 45px;
}
.c-hero__form-value::-moz-placeholder {
font-size: 1rem;
}
.c-hero__form-value::placeholder {
font-size: 1rem;
}
.c-hero__form-value:focus {
box-shadow: 0 0 0 2px #ed4500;
}
.c-hero__form-submit {
position: absolute;
right: 0;
top: 0;
order: 3;
margin-left: 6px;
padding: 15px 13px 12px 16px;
border-color: transparent !important;
}
.c-hero__form-submit:hover:not(:disabled) {
background-color: #FF6729;
color: white;
}
.c-hero__swirl {
height: 2.7976vw;
width: 100%;
position: absolute;
bottom: -1px;
left: 0;
pointer-events: none;
overflow: hidden;
}
.c-hero__swirl > svg {
position: absolute;
bottom: 0;
left: 0;
}
.c-hero__grid {
display: -ms-grid;
display: grid;
margin-bottom: 40px;
}
@media screen and (min-width: 800px) {
.c-hero__grid {
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
@media screen and (min-width: 800px) {
.c-hero__grid.is-reversed {
direction: rtl;
}
.c-hero__grid.is-reversed > * {
direction: ltr;
}
}
/**
* Scoped classes because RTE content will be dropped in here
* .s-text class cannot be used because of inherited colors
*/
.c-hero__text {
margin: 0 auto;
text-align: center;
color: #202121 !important;
font-family: "Inter", sans-serif;
font-size: 1.25rem;
line-height: 1.6;
}
#home .c-hero__text > h1 {
font-weight: 700;
}
@media screen and (min-width: 940px) {
body:lang(ru) .c-hero__text > h1 {
font-size: 2.8125rem;
}
}
@media screen and (max-width: 939px) {
.c-hero__text > h1 {
font-size: 2.25rem;
}
}
.c-hero__text > h1, .c-hero__text > h2, .c-hero__text > h3, .c-hero__text > h4, .c-hero__text > h5, .c-hero__text > h6 {
margin-bottom: 1.5rem;
}
.c-hero__text > * + * {
margin-top: 1.5rem;
}
.c-hero__text p {
font-size: 1.25rem;
}
@media screen and (max-width: 799px) {
.c-hero__text p {
font-size: 1.115rem;
}
}
@media screen and (min-width: 800px) {
.c-hero__text {
padding-right: 50px;
}
.is-reversed .c-hero__text {
padding-left: 50px;
padding-right: 0;
}
}
@media screen and (min-width: 1320px) {
.c-hero__text {
max-width: 974px;
padding: 0 50px 0 0;
}
}
.c-hero__grid .c-hero__text {
text-align: left;
}
@media screen and (max-width: 799px) {
.c-hero__text {
font-size: 1.115rem;
}
}
/**
* Scoped classes because RTE content will be dropped in here
* .s-text class cannot be used because of inherited colors
*/
.c-heroV2__text {
margin: 0 auto;
text-align: center;
color: #202121 !important;
font-family: "Inter", sans-serif;
font-size: 1.25rem;
line-height: 1.6;
display: flex;
flex-direction: column;
align-items: center;
}
#home .c-heroV2__text > h1 {
font-weight: 700;
}
@media screen and (min-width: 940px) {
body:lang(ru) .c-heroV2__text > h1 {
font-size: 2.8125rem;
}
}
@media screen and (max-width: 939px) {
.c-heroV2__text > h1 {
font-size: 2.25rem;
}
}
.c-heroV2__text > h1, .c-heroV2__text > h2, .c-heroV2__text > h3, .c-heroV2__text > h4, .c-heroV2__text > h5, .c-heroV2__text > h6 {
margin-bottom: 1.5rem;
}
.c-heroV2__text > * + * {
margin-top: 1.5rem;
}
.c-heroV2__text p {
font-size: 1.25rem;
}
.c-heroV2__description {
display: flex;
flex-direction: column;
gap: clamp(20px, 5vw, 32px);
margin-top: 0;
}
.c-heroV2__label {
color: #FF6729;
font-weight: 700;
font-size: 18px;
font-family: "Gilroy", sans-serif;
}
.c-heroV2__mw {
max-width: 800px;
margin-top: 16px;
}
.c-heroV2__mw h1 {
margin-bottom: 32px;
}
.c-heroV2__column {
margin-top: 96px;
}
.c-heroV2__column--contained {
margin-top: 96px;
max-width: 800px;
}
.c-hero__column--additional-col {
grid-row: 1;
margin-bottom: 40px;
}
@media screen and (min-width: 800px) {
.c-hero__column--additional-col {
padding-top: 66px;
grid-row: unset;
margin-bottom: 0;
}
.c-hero__column--additional-col > * {
width: 116.6666666667%;
}
}
.c-hero__description h1 {
margin-bottom: 2rem;
}
.c-hubspot-forms {
display: -ms-grid;
display: grid;
row-gap: 1.7em;
padding: 45px;
box-shadow: 0 20px 30px -10px rgba(112, 123, 140, 0.2);
}
.c-icon-button {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: row;
width: 40px;
height: 40px;
color: #333333;
border-radius: 100%;
transition-property: color, background-color, border, box-shadow;
transition-duration: 0.25s;
outline: none;
border: 1px solid rgba(151, 151, 151, 0.07);
background-color: white;
box-shadow: 0 20px 30px rgba(39, 42, 52, 0.1);
}
.c-icon-button:hover {
color: #FF6729;
cursor: pointer;
}
.c-icon-button:active, .c-icon-button:focus {
color: #cf3c00;
}
.c-icon-button:focus {
box-shadow: none;
}
.c-icon-button[data-icon-direction=reverse] svg {
transform: rotate(0.5turn);
}
.c-image {
display: block;
}
.c-image > img {
display: inline-block;
position: relative;
text-align: center;
}
.c-image > img:before {
border-radius: 4px;
font-size: 0.9375rem;
display: block;
position: absolute;
top: -10px;
left: 0;
height: calc(100% + 20px);
width: 100%;
padding: 15px;
background-color: #F6F8F9;
background-image: url(/img/kms/dynamic/image.svg);
background-repeat: no-repeat;
background-position: bottom 20px center;
background-size: 130px;
border: 2px solid #F6F8F9;
}
.c-image.c-image--prevent-stretch {
text-align: center;
}
.c-image:not(.c-image--prevent-stretch) img {
display: block;
width: 100%;
min-height: 130px;
}
.c-image--hide-drop-shadow img {
box-shadow: none !important;
}
.c-image__placeholder {
display: block;
width: 100%;
height: 0;
padding-bottom: 66.67%;
background-color: #F8FAFB;
background-image: url("/img/kms/dynamic/image.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 200px auto;
border: 1px solid rgba(172, 180, 191, 0.3);
border-radius: 16px;
}
.c-image__placeholder--video {
padding-bottom: 56.25%;
background-image: url("/img/kms/dynamic/video-block.svg");
}
.c-image__caption {
padding-top: 6px;
font-style: italic;
font-size: 0.9375rem;
text-align: center;
color: #acb4bf;
}
.c-intro {
flex-wrap: wrap;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin-bottom: -50px;
}
@media screen and (min-width: 1150px) {
.c-intro {
flex-wrap: nowrap;
align-items: flex-start;
}
}
.c-intro__body {
width: 100%;
margin: 0 5vw;
}
@media screen and (min-width: 1150px) {
.c-intro__body {
order: 2;
margin: 0 0 0 12.5%;
}
}
.c-intro__title {
font-size: 2rem;
line-height: 1.1875;
font-weight: 700;
color: #ffffff;
}
@media screen and (min-width: 550px) and (max-width: 1149px) {
.c-intro__title {
font-size: 2.8125rem;
line-height: 1.1111111111;
}
}
@media screen and (min-width: 1150px) {
.c-intro__title {
font-size: 3rem;
line-height: 1.25;
}
}
.c-intro__teaser {
font-size: 1.25rem;
line-height: 1.4;
margin-top: 30px;
color: #ffffff;
}
@media screen and (min-width: 550px) and (max-width: 1149px) {
.c-intro__teaser {
font-size: 1.75rem;
line-height: 1.2142857143;
}
}
@media screen and (min-width: 1150px) {
.c-intro__teaser {
font-size: 2rem;
line-height: 1.3125;
}
}
.c-intro__card {
flex: 0 0 300px;
}
@media screen and (max-width: 1149px) {
.c-intro__card {
margin-top: 60px;
margin-bottom: -90px;
}
}
@media screen and (min-width: 1150px) {
.c-intro__card {
order: 1;
margin-bottom: -180px;
}
}
.c-language {
position: relative;
z-index: 2;
max-width: 210px;
}
.c-language__icon {
position: absolute;
z-index: 3;
left: 8px;
top: 2px;
display: flex;
align-items: center;
min-height: 28px;
color: #202121;
pointer-events: none;
}
.c-language--iso .c-language__icon {
top: 6px;
}
.c-language:hover .c-language__icon {
color: rgba(255, 255, 255, 0.5);
}
.is-header-light .c-header .c-language__icon, .is-header-partial .c-header .c-language__icon {
color: rgba(255, 255, 255, 0.7);
}
.c-language__current {
position: relative;
z-index: 2;
display: block;
width: 100%;
padding: 5px 30px 5px 10px;
color: #202121;
font-size: 0.875rem;
text-align: left;
border: 1px solid transparent;
border-radius: 4px;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: background-color 0.15s, box-shadow 0.15s;
}
.c-language__current:focus, .c-language:hover .c-language__current {
outline: none;
color: white;
background-color: #2d2e2e;
}
.c-language:hover .c-language__current {
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.15);
}
.c-language--iso .c-language__current {
padding: 12px 30px;
font-size: 0.8125rem;
line-height: 1.1538461538;
font-weight: 700;
}
.is-header-light .c-header .c-language__current, .is-header-partial .c-header .c-language__current {
color: white;
}
.c-language__dropdown {
position: absolute;
left: 0;
top: calc(100% - 5px);
background-color: #131414;
list-style: none;
width: 100%;
padding: 5px 0 0;
margin: 0;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.15);
opacity: 0;
pointer-events: none;
transform: translate3d(0, 5px, 0);
transition: opacity 0.3s, transform 0.3s;
}
.c-language:hover .c-language__dropdown {
opacity: 1;
pointer-events: all;
transform: translate3d(0, 0, 0);
}
.c-language__item:nth-child(even) {
background-color: #181919;
}
.c-language__link {
display: block;
padding: 5px 15px 5px 10px;
background-color: transparent;
font-size: 0.9375rem;
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
transition: background-color 0.3s;
}
.c-language__link:hover {
color: #ffffff;
background-color: #2d2e2e;
}
.c-language--iso .c-language__link {
font-size: 0.8125rem;
line-height: 1.1538461538;
font-weight: 700;
}
.c-language__arrow {
position: absolute;
z-index: 3;
right: 12px;
top: 2px;
display: flex;
align-items: center;
min-height: 28px;
color: #202121;
pointer-events: none;
}
.c-language--iso .c-language__arrow {
top: 6px;
}
.c-language--iso .c-language__arrow svg {
width: 10px;
height: 8px;
}
.c-language__arrow .c-language:focus, .c-language:hover .c-language__arrow {
color: white;
}
.is-header-light .c-header .c-language__arrow, .is-header-partial .c-header .c-language__arrow {
color: rgba(255, 255, 255, 0.7);
}
.c-lead {
font-size: 1.25rem;
line-height: 1.6;
color: #333333;
}
@media screen and (min-width: 600px) {
.c-lead {
font-size: 1.5rem;
line-height: 1.5833333333;
}
}
.c-list-table {
list-style: none;
margin: 0;
padding: 0;
}
.c-list-table__row {
padding: 50px 0;
border-bottom: 1px solid #F6F8F9;
}
@media screen and (max-width: 1023px) {
.c-list-table__row > * + * {
margin-top: 25px;
}
}
@media screen and (min-width: 736px) and (max-width: 1023px) {
.c-list-table__row:not(.c-list-table__row--header) {
display: -ms-grid;
display: grid;
grid-template-areas: "column1 column1 column1" "column2 . column3";
grid-template-columns: 1fr 40px 1fr;
grid-template-rows: auto auto;
}
.c-list-table__row:not(.c-list-table__row--header) .c-list-table__column:nth-child(1) {
grid-area: column1;
}
.c-list-table__row:not(.c-list-table__row--header) .c-list-table__column:nth-child(2) {
grid-area: column2;
}
.c-list-table__row:not(.c-list-table__row--header) .c-list-table__column:nth-child(3) {
grid-area: column3;
}
}
@media screen and (min-width: 736px) and (max-width: 1023px){
.c-list-table__row:not(.c-list-table__row--header) .c-list-table__column:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
.c-list-table__row:not(.c-list-table__row--header) .c-list-table__column:nth-child(2) {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
.c-list-table__row:not(.c-list-table__row--header) .c-list-table__column:nth-child(3) {
-ms-grid-row: 2;
-ms-grid-column: 3;
}
}
@media screen and (min-width: 736px) and (max-width: 1023px){
.c-list-table__row:not(.c-list-table__row--header) .c-list-table__column:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
.c-list-table__row:not(.c-list-table__row--header) .c-list-table__column:nth-child(2) {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
.c-list-table__row:not(.c-list-table__row--header) .c-list-table__column:nth-child(3) {
-ms-grid-row: 2;
-ms-grid-column: 3;
}
}
@media screen and (min-width: 736px) and (max-width: 1023px){
.c-list-table__row:not(.c-list-table__row--header) .c-list-table__column:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}
.c-list-table__row:not(.c-list-table__row--header) .c-list-table__column:nth-child(2) {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
.c-list-table__row:not(.c-list-table__row--header) .c-list-table__column:nth-child(3) {
-ms-grid-row: 2;
-ms-grid-column: 3;
}
}
@media screen and (min-width: 1024px) {
.c-list-table__row {
display: flex;
justify-content: space-between;
flex-direction: row;
}
}
.c-list-table__row--header {
padding: 0;
border-bottom: none;
}
.c-list-table__row--header + .c-list-table__row--header {
margin-top: 10px;
}
@media screen and (min-width: 1024px) {
.c-list-table__column {
width: 33.3333333333%;
}
.c-list-table__column + .c-list-table__column {
margin-left: 50px;
}
.c-list-table__column:nth-child(2n):nth-last-child(2n) {
width: calc(33.3333333333% + 200px);
}
}
@media screen and (min-width: 1024px) {
.c-list-table__column--double {
width: calc(66.6666666667% + 200px + 50px);
}
}
* + .c-list-table__title {
margin-top: 30px;
}
.c-mailchimp-form {
width: 100%;
max-width: 580px;
margin: auto;
}
.c-mailchimp-form #mc_embed_signup .mc-field-group {
clear: none;
position: inherit;
width: 100%;
padding-bottom: 0;
min-height: 0;
}
.c-mailchimp-form #mc_embed_signup .mc-field-group label {
display: inherit;
margin-bottom: 0;
}
.c-mailchimp-form #mc_embed_signup .mc-field-group input {
display: inherit;
width: inherit;
padding: 0 15px;
text-indent: 0;
}
.c-mailchimp-form #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
color: white;
margin-bottom: 0;
}
.c-mailchimp-form #mc_embed_signup .button {
height: auto;
padding: 11px 15px 10px;
border: none;
font-size: 0.9375rem;
line-height: 1.3333333333;
font-weight: 700;
background-color: #328dfc;
}
.c-mailchimp-form #mc_embed_signup .button:hover:not(:disabled) {
background-color: #036dee;
}
.c-mailchimp-form.c-form--on-light .focused .c-form__label {
color: #333333;
}
.c-mailchimp-form.c-form--on-light #mc_embed_signup input {
border-color: #D0DDE7;
}
.c-mailchimp-form.c-form--on-light #mc_embed_signup input:focus {
box-shadow: 0 0 0 2px #D0DDE7;
}
.c-mega-menu {
display: none;
position: absolute;
left: -75px;
top: 100%;
padding-top: 16px;
width: 1100px;
}
.is-hoverable-item:hover .c-mega-menu {
display: block;
}
@media screen and (min-width: 1350px) {
.c-mega-menu {
left: -130px;
width: 1200px;
}
}
@media screen and (max-width: 1149px) {
.c-mega-menu {
width: 900px;
}
}
.c-mega-menu__content {
display: flex;
background-color: #fff;
border: 1px solid #EAEDF4;
border-radius: 4px;
box-shadow: 0 4.529px 3.623px 0 rgba(91, 91, 91, 0.02), 0 12.522px 10.017px 0 rgba(91, 91, 91, 0.04), 0 30.147px 24.118px 0 rgba(91, 91, 91, 0.05), 0 100px 80px 0 rgba(91, 91, 91, 0.07);
}
.c-mega-menu__content-container {
width: 33.3333333333%;
}
.c-mega-menu__content-container:not(:last-child) {
border-right: 1px solid #E9EDF5;
}
.c-mega-menu__content-title {
max-height: 73px;
padding: 24px;
display: flex;
align-items: center;
gap: 16px;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 1.15;
color: #202121;
border-bottom: 1px solid #EAEDF4;
text-decoration: none;
text-underline-offset: 0.25em;
transition: all 200ms linear;
}
.c-mega-menu__content-title:hover {
--chevron-translate-x: 25%;
text-decoration: underline;
color: #FF6729;
background-color: #F2F5F7;
}
.c-mega-menu__content-title svg {
width: 24px;
height: 24px;
color: currentColor;
margin-left: auto;
transform: translateX(var(--chevron-translate-x));
transition: transform 275ms ease-out;
}
.c-mega-menu__list {
text-decoration: none;
list-style: none;
margin: 0;
}
.c-mega-menu__list-item {
display: flex;
align-items: center;
gap: 16px;
padding: 24px;
color: #202121;
text-decoration: none;
transition: all 200ms linear;
}
.c-mega-menu__list-item:hover {
--title-text-decoration: underline;
--chevron-translate-x: 25%;
color: #FF6729;
background-color: #F2F5F7;
}
.c-mega-menu__list-item svg {
width: 24px;
height: 24px;
color: currentColor;
transform: translateX(var(--chevron-translate-x));
transition: transform 275ms ease-out;
}
.c-mega-menu__item-text {
max-width: 312px;
margin-right: auto;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
font-style: normal;
}
.c-mega-menu__item-title {
color: inherit;
letter-spacing: 0.2px;
-webkit-text-decoration: var(--title-text-decoration);
text-decoration: var(--title-text-decoration);
text-underline-offset: 0.25em;
}
.c-mega-menu__item-subtitle {
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
color: #6D6E6F;
}
.c-ninja-link {
color: #333333;
text-decoration: none;
}
.c-ninja-link:hover {
color: #328dfc;
}
.c-options-menu {
list-style: none;
margin-left: 0;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.c-options-menu__back {
color: #333333;
}
.c-options-menu__back svg {
width: 30px;
height: 27px;
}
.c-options-menu__back:hover {
color: #FF6729;
}
.c-options-menu__label {
font-family: "Inter", sans-serif;
font-size: 1rem;
font-weight: 400;
margin-bottom: 10px;
color: #6D6F70;
}
@media screen and (max-width: 839px) {
.c-options-menu__segment:last-child .c-options-menu__label {
text-align: right;
}
}
.c-overlay-menu {
z-index: 200;
display: flex;
flex-direction: column;
position: fixed;
height: 100vh;
overflow: hidden;
width: 100%;
left: 0;
top: 0;
pointer-events: none;
}
@media screen and (min-width: 1150px) {
.c-overlay-menu {
display: none;
}
}
.c-overlay-menu__shader {
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.32, 0.82, 0.54, 1);
}
.is-overlay-menu-active .c-overlay-menu__shader {
opacity: 0.7;
}
.c-overlay-menu__bar {
display: flex;
justify-content: space-between;
flex-direction: row;
position: relative;
z-index: 3;
flex: none;
background-color: white;
pointer-events: all;
box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.1);
opacity: 1;
transition: transform 0.4s ease-out, opacity 0.2s;
}
.is-bar-hidden .c-overlay-menu__bar {
transform: translateY(-60px);
opacity: 0;
}
.c-overlay-menu__body {
position: relative;
z-index: 2;
pointer-events: all;
flex: auto;
overflow: auto;
min-height: 0;
transform: translateX(-100%);
transition: transform 0.5s cubic-bezier(0.32, 0.82, 0.54, 1);
background-color: #ffffff;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.c-overlay-menu__logo {
display: block;
flex: none;
width: 60px;
height: 60px;
}
.c-overlay-menu__toggle {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
align-self: center;
margin-right: 23px;
position: relative;
width: 40px;
height: 40px;
padding: 0;
z-index: 5;
color: #202121;
background: none;
border: none;
outline: none;
cursor: pointer;
}
.c-overlay-menu__toggle span,
.c-overlay-menu__toggle:after,
.c-overlay-menu__toggle:before {
content: "";
position: absolute;
top: 20px;
left: 7px;
right: 7px;
height: 3px;
margin-top: -2px;
pointer-events: none;
background: currentColor;
border-radius: 3px;
transition: all 0.2s ease-out;
}
.c-overlay-menu__toggle:before {
top: 12px;
}
.c-overlay-menu__toggle:after {
top: 28px;
}
.is-overlay-menu-active .c-overlay-menu__body {
transform: none;
}
.is-overlay-menu-active .c-overlay-menu__toggle > span {
opacity: 0;
}
.is-overlay-menu-active .c-overlay-menu__toggle:after,
.is-overlay-menu-active .c-overlay-menu__toggle:before {
transform: rotate(45deg);
top: 50%;
}
.is-overlay-menu-active .c-overlay-menu__toggle:before {
transform: rotate(-45deg);
}
.c-overlay-menu__list {
padding: 0;
margin: 0;
list-style: none;
}
.c-overlay-menu__main-link {
display: flex;
justify-content: space-between;
font-size: 1.375rem;
font-weight: 700;
padding: 14px 20px 12px;
color: #202121;
text-decoration: none;
cursor: pointer;
border-bottom: 1px solid #E9EBF5;
}
.c-overlay-menu__main-link.toggled svg {
transform: scaleY(-1);
}
.c-overlay-menu__main-link--npe > * {
pointer-events: none;
}
.c-overlay-menu__start-trail {
margin-top: 30px;
padding: 30px 24px;
}
.c-overlay-menu__start-trail .c-button {
width: 100%;
}
.c-overlay-menu__split-lists {
margin-top: 40px;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0 24px;
}
.c-overlay-menu__split-lists > * {
width: 50%;
}
.c-overlay-menu__sub-menu-title {
color: #202121;
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 8px;
}
.c-overlay-menu__small-link {
display: inline-block;
padding: 6px 0;
font-size: 0.875rem;
line-height: 1.2;
color: #737D87;
text-decoration: none;
}
.c-overlay-menu__submenu {
background-color: #F8F9FA;
display: none;
}
.c-overlay-menu__submenu.is-open {
display: block;
}
.c-overlay-menu__sublink {
display: flex;
justify-content: space-between;
padding: 18px 20px 16px;
font-size: 1rem;
color: #202121;
text-decoration: none;
cursor: pointer;
border-bottom: 1px solid white;
}
.c-overlay-menu__sublink.toggled svg {
transform: scaleY(-1);
}
.c-overlay-menu__arrow--small {
margin-right: 2px;
}
.c-overlay-menu__subsubmenu {
background-color: white;
display: none;
}
.c-overlay-menu__subsubmenu.is-open {
display: block;
}
.c-overlay-menu__subsubmenu .c-overlay-menu__sublink {
border-bottom: 1px solid #F8FAFB;
}
.c-package-price {
padding: 32px 16px;
text-align: center;
}
.c-package-price__title {
font-size: 1.5rem;
position: relative;
color: #202121;
font-weight: 600;
}
.c-package-price__title::after {
font-size: 0.8125rem;
font-weight: 400;
font-family: "Inter", sans-serif;
content: attr(data-subline);
position: absolute;
bottom: -18px;
left: 0;
right: 0;
color: #9D9F9F;
}
.c-package-price__amount {
display: -ms-inline-grid;
display: inline-grid;
grid-template-columns: 1fr auto 1fr;
justify-content: center;
align-items: center;
align-content: center;
height: 50px;
color: #202121;
}
.c-package-price__symbol::before {
font-size: 1.125rem;
font-weight: 400;
content: attr(data-currency-symbol);
margin-right: 8px;
text-align: right;
}
.c-package-price__number {
font-size: 2.5rem;
line-height: 1;
font-weight: 600;
letter-spacing: 2px;
grid-column: 2;
grid-row: 1;
color: #202121;
}
.c-package-price__text {
font-size: 2rem;
font-weight: 700;
line-height: 1.6rem;
}
.c-package-price__info {
font-size: 0.875rem;
line-height: 1.7142857143;
font-weight: 400;
color: #3B3C3F;
display: flex;
flex-direction: column;
min-height: 72px;
}
.c-package-price__info p:first-of-type {
font-weight: 600;
}
.c-package-price__base {
font-size: 14px;
font-weight: 600;
}
.c-package-price__base::before {
content: attr(data-currency-symbol);
}
.c-pagination {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
list-style: none;
margin-left: 0;
}
.c-pagination__item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
font-size: 1.25rem;
line-height: 1.3;
font-weight: 700;
color: rgba(184, 184, 184, 0.5);
}
.c-pagination__link {
border-radius: 4px;
padding: 10px;
color: rgba(51, 51, 51, 0.5);
text-decoration: none;
transition: color 0.2s, background-color 0.2s;
}
.c-pagination__link:link:hover {
color: #202121;
background: #F2F5F7;
}
.c-pagination__link.is-active {
font-weight: bold;
color: #FF6729;
cursor: default;
}
.c-pagination__prev,
.c-pagination__next {
display: flex;
justify-content: center;
align-items: stretch;
flex-direction: row;
margin-left: 20px;
padding: 10px;
transition: color 0.2s;
}
a.c-pagination__prev, a.c-pagination__next {
color: #FF6729;
}
.c-pagination__prev {
transform: rotate(0.5turn);
margin-left: 0;
margin-right: 20px;
}
.c-post-category {
list-style-type: none;
margin-left: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
-moz-column-gap: 40px;
column-gap: 40px;
row-gap: 10px;
font-weight: bold;
border-bottom: 4px solid #F2F5F7;
margin-bottom: 38px;
}
@media screen and (max-width: 739px) {
.c-post-category {
background: red;
}
}
.c-post-category__item {
padding-block: 10px;
padding-inline: 20px;
cursor: pointer;
}
.c-post-category__item.is-active {
background: #F2F5F7;
}
.c-post-category__item a {
text-decoration: none;
color: #202121;
}
.c-quote {
margin: 0;
text-align: center;
}
.c-quote__row {
padding: 90px 0;
background: #1B1B1B;
}
@media screen and (max-width: 799px) {
.c-quote__row {
padding: 85px 0 70px;
}
}
.c-quote__row.c-article__quote {
position: relative;
background: none;
}
.c-quote__row.c-article__quote:after {
content: "";
position: absolute;
z-index: -1;
left: -50vw;
top: 0;
display: block;
width: 200vw;
height: 100%;
background: #1B1B1B;
}
.c-quote__row--grey {
background: #F2F8FF;
}
.c-quote__row--grey.c-article__component--grey-background {
background: transparent;
}
.c-quote__row--grey.c-article__component--grey-background:after {
display: none;
}
.c-quote__icon {
display: inline-block;
color: #FF6729;
}
.c-quote__text {
font-size: 2rem;
line-height: 1.4;
font-family: "Gilroy", sans-serif;
font-weight: 700;
margin: 0 auto 30px;
max-width: 700px;
color: white;
}
.c-quote__text q:before, .c-quote__text q:after {
display: none;
}
@media screen and (max-width: 799px) {
.c-quote__text {
padding: 0 40px;
font-size: 1.625rem;
}
}
.c-quote__row--grey .c-quote__text {
color: #202121;
}
.c-quote__prefix {
position: relative;
bottom: 8px;
left: -84px;
display: inline-block;
margin-right: -110px;
width: 130px;
max-height: 110px;
vertical-align: bottom;
opacity: 0.2;
}
@media screen and (max-width: 799px) {
.c-quote__prefix {
width: 85px;
max-height: 72px;
}
}
.c-quote__row--grey .c-quote__prefix {
color: #BBC2D6;
}
.c-prefooter {
z-index: 30;
color: #202121;
}
.c-prefooter__main {
padding: 23px 0;
color: #202121;
border-bottom: 2px solid rgba(208, 221, 231, 0.25);
}
@media screen and (min-width: 520px) {
.c-prefooter__main {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}
}
.c-prefooter__links {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
font-size: 0.8125rem;
font-weight: 700;
margin: 5px 0;
text-transform: uppercase;
}
.c-prefooter__label {
font-size: 1.125rem;
line-height: 1.3333333333;
font-family: "Gilroy", sans-serif;
font-weight: bold;
margin-right: 10px;
transform: translateY(2px);
text-transform: none;
}
.c-prefooter__social {
border-radius: 4px;
margin-left: 6px;
padding: 7px;
color: #9D9F9F;
transition-duration: 0.2s;
transition-property: color, background-color, box-shadow;
}
.c-prefooter__social:hover {
color: #202121;
background-color: rgba(32, 33, 33, 0.05);
}
.c-prefooter__contact {
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin: 5px 0;
padding: 7px 0;
text-decoration: none;
color: #9D9F9F;
transition-duration: 0.2s;
transition-property: color, background-color, box-shadow;
}
.c-prefooter__contact:hover {
color: #202121;
}
.c-prefooter__icon {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
color: #202121;
}
.c-prefooter__contact:hover .c-prefooter__icon {
color: #FF6729;
animation: phone-ring 1.5s infinite;
}
.c-prefooter__contact:hover .c-prefooter__icon svg {
animation: phone-grow 1.5s infinite;
}
.c-prefooter__number {
margin-left: 10px;
}
@keyframes phone-ring {
10% {
transform: rotate(12deg);
}
15% {
transform: rotate(-12deg);
}
20% {
transform: rotate(12deg);
}
25% {
transform: rotate(-12deg);
}
30% {
transform: rotate(12deg);
}
35% {
transform: rotate(-12deg);
}
40% {
transform: rotate(0);
}
}
@keyframes phone-grow {
50% {
transform: scale(1);
}
65% {
transform: scale(1.3);
}
90% {
transform: scale(1);
}
}
.c-pricing__intro {
margin-top: 72px;
text-align: center;
}
.c-pricing__extra-products {
margin: 24px auto 0;
}
.c-pricing__extra-products .create-plan-product {
margin-bottom: 24px !important;
}
.c-pricing__extra-products .c-package-price__symbol {
display: flex;
text-align: right;
justify-content: flex-end;
}
.c-pricing__extra-products .c-package-price__symbol:before {
margin-right: 0;
font-size: 14px;
line-height: 21px;
}
.c-pricing__extra-products .c-package-price__symbol--inline {
display: inline;
}
.c-pricing__extra-products .extra-price-label {
font-size: 14px;
line-height: 21px;
font-weight: 600;
text-align: right;
}
.c-pricing__intro-title {
font-size: 36px;
line-height: 39px;
margin-bottom: 16px;
font-weight: 600;
}
@media screen and (max-width: 639px) {
.c-pricing__intro-title {
font-size: 24px;
line-height: 32px;
}
}
.c-pricing__intro-subtitle {
font-size: 18px;
line-height: 29px;
font-weight: 400;
}
.c-pricing__currency-switch {
text-align: center;
margin-top: 32px;
}
.c-pricing__grid {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, auto));
justify-content: center;
margin-top: 40px;
}
@media screen and (min-width: 1024px) and (max-width: 1443px) {
.c-pricing__grid {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, auto));
}
}
@media screen and (max-width: 539px) {
.c-pricing__grid {
display: block;
}
}
.c-pricing__item {
display: flex;
flex-direction: column;
height: 100%;
max-width: 312px;
border: 2px solid #EAEEF0;
margin: -1px;
margin-top: 0;
margin-bottom: 0;
position: relative;
z-index: 1;
}
.c-pricing__item.is-highlighted {
box-shadow: 0 16px 40px -8px rgba(112, 123, 140, 0.2);
z-index: 3;
}
@media screen and (max-width: 539px) {
.c-pricing__item.is-highlighted {
box-shadow: none;
}
}
@media screen and (max-width: 539px) {
.c-pricing__item {
max-width: 612px;
margin-bottom: 24px !important;
}
.c-pricing__item .c-pricing__section:not(:first-child) {
display: none;
}
}
.c-pricing-section__dropdown-toggle {
font-size: 0.875rem;
font-weight: 500;
display: none;
text-align: center;
padding: 12px;
}
@media screen and (max-width: 539px) {
.c-pricing-section__dropdown-toggle {
display: block;
border-top: 2px solid #EAEEF0;
}
.c-pricing-section__dropdown-toggle img {
margin-left: 3px;
width: 12px;
}
.c-pricing-section__dropdown-toggle.is-open img {
transform: rotate(180deg);
}
.c-pricing-section__dropdown-toggle.is-open ~ .c-pricing__section {
display: initial;
border-top: none;
}
.c-pricing-section__dropdown-toggle.is-open ~ .c-pricing__section--footer {
border-top: 2px solid #EAEEF0;
padding: 12px;
min-height: 0;
}
.c-pricing-section__dropdown-toggle.is-open ~ .c-pricing__section--footer .c-text-button {
min-height: 0;
}
}
.c-pricing__section {
padding: 32px;
color: #333333;
}
.c-pricing__section + .c-pricing__section {
border-top: 2px solid #EAEEF0;
}
.c-pricing__section--platform {
background-color: #F2F5F7;
padding-bottom: 16px;
}
@media screen and (max-width: 539px) {
.c-pricing__section--labels {
padding-top: 0;
}
}
.c-pricing__section--labels,
.c-pricing__section--products {
flex: 1;
}
.c-pricing__section--above-labels {
font-size: 0.75rem;
text-transform: uppercase;
margin-bottom: 24px;
}
.c-pricing__section--labels--enterprise .c-pricing__features {
border-top: 2px solid white;
}
.c-pricing__section--footer {
min-height: 64px;
text-align: center;
padding: 16px 32px;
}
.c-pricing__section--footer .c-text-button {
min-height: 33px;
}
.c-pricing__label {
font-size: 0.75rem;
line-height: 1.3333333333;
font-weight: 600;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 2px 8px;
background-color: #202121;
color: #ffffff;
}
@media screen and (max-width: 539px) {
.c-pricing__label {
font-size: 0.625rem;
line-height: 14px/;
font-weight: 500;
text-transform: uppercase;
}
}
.c-pricing__title {
margin-top: 10px;
}
.c-pricing__amount {
margin-top: 16px;
}
.c-pricing__header-button {
margin-top: 16px;
min-height: 64px;
}
@media screen and (max-width: 524px) {
.c-pricing__header-button {
margin-top: 0;
min-height: 0;
}
}
.c-pricing__platform-title {
font-size: 1.125rem;
font-weight: 600;
padding-bottom: 8px;
}
.c-pricing__platform-sub-title {
font-family: "Inter", sans-serif;
font-size: 0.75rem;
font-weight: 600;
padding-bottom: 8px;
}
@media screen and (max-width: 539px) {
.c-pricing__platform-sub-title {
display: none;
}
}
.c-pricing__platform-desc {
font-size: 0.75rem;
}
.c-pricing__subheading {
font-size: 0.8125rem;
font-weight: 500;
margin-bottom: 16px;
}
.c-pricing__products {
margin-left: 0;
}
.c-pricing__product-item {
display: flex;
align-items: baseline;
}
.c-pricing__product-item + .c-pricing__product-item {
margin-top: 16px;
}
.c-pricing__product-title {
font-size: 0.9375rem;
font-weight: 500;
font-family: "Inter", sans-serif;
}
.c-pricing__product-desc {
font-size: 0.8125rem;
color: #4c4b4b;
margin-top: 4px;
}
.c-pricing__product-icon {
flex: none;
color: #FF6729;
margin-right: 8px;
width: 40px;
}
.c-pricing__features {
list-style: none;
margin-left: 0;
min-height: 100%;
}
.c-pricing__features > * + * {
margin-top: 10px;
}
.c-pricing__feature {
font-size: 0.75rem;
line-height: 1.0833333333;
display: flex;
flex-direction: row;
align-items: baseline;
}
.c-pricing__feature::before {
content: "";
flex: none;
width: 24px;
height: 10px;
background-image: url(/img/checked.svg);
background-size: 60%;
background-repeat: no-repeat;
background-position: left center;
}
.c-pricing__feature.is-excluded {
color: #6D6F70;
text-decoration: line-through;
}
.c-pricing__feature.is-excluded::before {
background-image: url(/img/unchecked.svg);
background-size: 44%;
transform: translate(2px, 1px);
}
.c-pricing__features--compact > * + * {
margin-top: 4px;
}
@media screen and (min-width: 940px) {
.c-public-roadmap {
width: 90vw;
margin: auto;
}
}
@media screen and (max-width: 939px) {
.c-public-roadmap {
padding-top: 60px;
}
}
.c-rating {
border-radius: 16px;
position: relative;
margin: 0 auto;
max-width: -moz-fit-content;
max-width: fit-content;
padding-left: 40px;
padding-right: 40px;
overflow: hidden;
background-color: #ffffff;
box-shadow: 0 20px 30px rgba(39, 42, 52, 0.1);
}
@media screen and (max-width: 669px) {
.c-rating {
padding-left: 10px;
padding-right: 10px;
}
}
.c-rating__spacing {
position: relative;
}
.c-rating__spacing .c-rating__top-bg {
top: 0;
height: 50%;
}
.c-rating__spacing .c-rating__bottom-bg {
bottom: 0;
height: 50%;
}
.c-rating__spacing--top {
padding-top: clamp(48px, 8vw, 100px);
}
.c-rating__spacing--top .c-rating__top-bg {
height: calc(50% + clamp(48px, 8vw, 100px)/2);
}
.c-rating__spacing--top .c-rating__bottom-bg {
height: calc(50% - clamp(48px, 8vw, 100px)/2);
}
.c-rating__spacing--bottom {
padding-bottom: clamp(48px, 8vw, 100px);
}
.c-rating__spacing--bottom .c-rating__top-bg {
height: calc(50% - clamp(48px, 8vw, 100px)/2);
}
.c-rating__spacing--bottom .c-rating__bottom-bg {
height: calc(50% + clamp(48px, 8vw, 100px)/2);
}
.c-rating__spacing--both {
padding-top: clamp(48px, 8vw, 100px);
padding-bottom: clamp(48px, 8vw, 100px);
}
.c-rating__top-bg,
.c-rating__bottom-bg {
position: absolute;
left: 0;
width: 100%;
}
.c-rating__bg--grey {
background-color: #F2F5F7;
}
.c-rating__bg--black {
background: #1B1B1B;
}
@media screen and (max-width: 939px) {
.c-rating__spacing-top {
padding-top: 60px;
}
.c-rating__spacing-top .c-rating__top-bg {
height: calc(50% + 30px);
}
.c-rating__spacing-top .c-rating__bottom-bg {
height: calc(50% - 30px);
}
.c-rating__spacing--bottom {
padding-bottom: 60px;
}
.c-rating__spacing--bottom .c-rating__top-bg {
height: calc(50% - 30px);
}
.c-rating__spacing--bottom .c-rating__bottom-bg {
height: calc(50% + 30px);
}
.c-rating__spacing--both {
padding-top: 60px;
padding-bottom: 60px;
}
}
.c-rating__link {
padding: 30px 0 20px 0;
text-decoration: none;
color: #acb4bf;
}
@media screen and (min-width: 670px) {
.c-rating__link {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
}
.c-rating__stars {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
padding: 0 20px;
transform: translateY(-2px);
}
@media screen and (min-width: 670px) {
.c-rating__stars::after {
content: "";
display: block;
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: 1px;
background-color: #F6F8F9;
}
}
@media screen and (max-width: 669px) {
.c-rating__stars {
padding-top: 26px;
}
}
.c-rating__stars .c-star path {
transition-duration: 0.15s;
transform: translate3d(0, 0, 0);
}
.c-rating__stars .c-star:nth-child(1) path {
transition-delay: 0s;
}
.c-rating__stars .c-star:nth-child(2) path {
transition-delay: 0.1s;
}
.c-rating__stars .c-star:nth-child(3) path {
transition-delay: 0.2s;
}
.c-rating__stars .c-star:nth-child(4) path {
transition-delay: 0.3s;
}
.c-rating__stars .c-star:nth-child(5) path {
transition-delay: 0.4s;
}
.c-rating__stars.js-partly-in-viewport .full-star {
transform: translate3d(-100%, -80%, 0);
}
.c-rating__stars.js-partly-in-viewport .half-star {
transform: translate3d(-100%, -80%, 0);
}
.c-rating__logos {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
}
.c-rating__logos img {
filter: grayscale(100%);
max-height: 30px;
transition: all 0.1s ease-in-out;
}
.c-rating__logos-link {
margin: 0 24px;
display: flex;
align-items: center;
}
.c-rating__logos-link:hover img {
filter: grayscale(0);
}
@media screen and (max-width: 669px) {
.c-rating__logos-link {
margin: 0 10px;
}
}
.c-rating__label {
padding: 0 40px;
text-align: center;
color: #333333;
transition: color 0.2s;
}
.c-rating__link:hover .c-rating__label {
color: #FF6729;
}
@media screen and (min-width: 670px) {
.c-rating__label {
padding: 0 20px;
text-align: left;
}
}
.c-rating__icon {
position: absolute;
bottom: 0;
right: 0;
height: 60px;
width: 60px;
}
.c-rating__icon::before {
content: "";
display: block;
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(135deg, transparent 50%, #F2F4F6 50%, #F8FAFB 55%);
}
.c-rating__arrow {
position: absolute;
right: 15px;
bottom: 11px;
line-height: 0;
color: #9D9F9F;
transition: color, opacity;
transition-duration: 0.25s;
opacity: 0.5;
}
.c-rating__link:hover .c-rating__arrow {
color: #FF6729;
opacity: 1;
}
.c-rating_software-advice img {
max-height: 23px;
}
.c-rating_g2_link img {
max-height: 23px;
}
.c-recruitee-jobs {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: -20px auto;
}
.c-recruitee-jobs__item {
position: relative;
display: block;
width: 100%;
text-decoration: none;
margin: 20px 0;
padding: 20px 28px;
border: 1px solid #F8FAFB;
border-radius: 4px;
box-shadow: 0 20px 30px -10px rgba(112, 123, 140, 0.2);
cursor: pointer;
}
@media screen and (min-width: 850px) {
.c-recruitee-jobs__item {
width: calc((100% - 40px) / 2);
}
}
@media screen and (min-width: 380px) {
.c-recruitee-jobs__heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
}
@media screen and (max-width: 379px) {
.c-recruitee-jobs__heading > * + * {
margin-top: 10px;
}
}
.c-recruitee-jobs__title {
font-size: 1.125rem;
font-weight: 600;
color: #202121;
transition: color 0.15s;
}
@media screen and (max-width: 449px) {
.c-recruitee-jobs__title {
font-size: 0.9375rem;
}
}
.c-recruitee-jobs__item:hover .c-recruitee-jobs__title {
color: #FF6729;
}
.c-recruitee-jobs__link {
display: block;
margin-top: 16px;
font-size: 1rem;
color: #FF6729;
opacity: 1;
}
@media screen and (max-width: 449px) {
.c-recruitee-jobs__link {
font-size: 0.9375rem;
}
}
@media screen and (min-width: 380px) {
.c-recruitee-jobs__link {
margin-top: 8px;
}
}
.c-recruitee-jobs__department {
position: relative;
left: -12px;
display: inline-block;
flex: 0 0;
padding: 5px 12px;
border-radius: 8px;
background-color: #202121;
color: white;
font-size: 0.875rem;
}
@media screen and (max-width: 449px) {
.c-recruitee-jobs__department {
font-size: 0.8125rem;
}
}
@media screen and (min-width: 380px) {
.c-recruitee-jobs__department {
position: relative;
top: -5px;
right: -15px;
left: 0;
}
}
.c-recruitee-jobs__icon {
position: absolute;
bottom: 0;
right: 0;
height: 54px;
width: 54px;
}
.c-recruitee-jobs__icon::before {
content: "";
display: block;
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(135deg, transparent 50%, #F2F4F6 50%, #F8FAFB 55%);
transition: all 0.3s;
}
.c-recruitee-jobs__arrow {
position: absolute;
right: 11px;
bottom: 9px;
line-height: 0;
color: #202121;
transition: color, opacity;
transition-duration: 0.25s;
opacity: 0.5;
}
.c-recruitee-jobs__item:hover .c-recruitee-jobs__arrow {
color: #FF6729;
opacity: 1;
}
.c-recruitee-job-overlay {
display: block;
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
opacity: 0;
pointer-events: none;
}
.is-recruitee-job-overlay-active .c-recruitee-job-overlay {
z-index: 200;
opacity: 1;
pointer-events: all;
}
.c-recruitee-job-overlay__scroller {
position: relative;
z-index: 2;
width: 100%;
padding: 5vw;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.c-recruitee-job-overlay__shader {
position: fixed;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(32, 33, 33, 0);
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.is-recruitee-job-overlay-active .c-recruitee-job-overlay__shader {
background-color: rgba(32, 33, 33, 0.95);
}
.is-recruitee-job-overlay-fade-out .c-recruitee-job-overlay__shader {
transition: background-color 0.3s ease-in-out 0.15s;
background-color: rgba(32, 33, 33, 0);
}
.c-recruitee-job-overlay__modal {
position: relative;
z-index: 3;
width: 95vw;
max-width: 800px;
background: white;
border-radius: 24px;
box-shadow: 0 20px 30px -10px rgba(112, 123, 140, 0.2);
opacity: 0;
transform: translate3d(0, 30px, 0);
transition: opacity 0.3s ease-in-out 0.3s, transform 0.3s ease-in-out 0.3s;
}
.is-recruitee-job-overlay-active .c-recruitee-job-overlay__modal {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.is-recruitee-job-overlay-fade-out .c-recruitee-job-overlay__modal {
transition-delay: 0s;
opacity: 0;
}
.c-recruitee-job-overlay__header {
position: relative;
padding: 40px 40px 60px;
background-color: #202121;
border-radius: 16px 16px 0 0;
}
.c-recruitee-job-overlay__close-button {
position: absolute;
top: 43px;
right: 43px;
width: 20px;
height: 20px;
cursor: pointer;
transform: rotate(0.125turn);
opacity: 0.3;
transition: opacity 0.2s, transform 0.4s;
}
.c-recruitee-job-overlay__close-button:before, .c-recruitee-job-overlay__close-button:after {
content: "";
position: absolute;
left: 0;
top: calc(50% - 3px);
display: block;
background-color: white;
width: 100%;
height: 3px;
}
.c-recruitee-job-overlay__close-button:after {
transform: rotate(0.25turn);
}
.c-recruitee-job-overlay__close-button:hover {
opacity: 0.6;
transform: rotate(0.375turn);
}
.c-recruitee-job-overlay__navigation {
margin-bottom: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c-recruitee-job-overlay__navigation > * + * {
margin-left: 5px;
}
.c-recruitee-job-overlay__navigation.is-hidden {
opacity: 0;
margin-top: 0;
}
.c-recruitee-job-overlay__button {
display: flex;
justify-content: center;
align-items: center;
height: 28px;
width: 32px;
border: 2px solid currentColor;
color: rgba(255, 255, 255, 0.4);
background-color: transparent;
cursor: pointer;
transition: color 0.3s, border 0.3s;
}
.c-recruitee-job-overlay__button svg {
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.c-recruitee-job-overlay__button:focus {
outline-color: rgba(109, 147, 202, 0.25);
}
.c-recruitee-job-overlay__button:hover {
color: rgba(255, 255, 255, 0.8);
}
.c-recruitee-job-overlay__button:hover svg {
transform: translate3d(2px, 0, 0);
}
.c-recruitee-job-overlay__button.previous {
transform: scaleX(-1);
}
.c-recruitee-job-overlay__swirl {
position: absolute;
left: 0;
bottom: 0;
display: flex;
align-items: flex-end;
width: 100%;
transform: translateY(1px);
}
.c-recruitee-job-overlay__swirl svg {
width: 100%;
}
.c-recruitee-job-overlay__title {
color: white;
}
.c-recruitee-job-overlay__subtitle {
padding: 30px 42px 30px;
font-size: 1.25rem;
line-height: 1.4;
font-weight: 700;
color: #202121;
border-bottom: 2px solid #F6F8F9;
}
.c-recruitee-job-overlay__subtitle--colored {
background-color: #F6F8F9;
border-bottom: none;
}
.c-recruitee-job-overlay__description,
.c-recruitee-job-overlay__requirements {
padding: 40px 42px;
background: white;
}
.c-recruitee-job-overlay__footer {
display: flex;
justify-content: space-between;
flex-wrap: wrap-reverse;
padding: 40px;
background-color: #F6F8F9;
border-radius: 0 0 16px 16px;
}
.c-recruitee-job-overlay__footer > * {
flex-shrink: 0;
margin: 10px 0;
}
.c-media + .c-media {
margin-top: 50px;
padding-top: 60px;
border-top: 1px solid #F6F8F9;
}
.c-media__link {
display: block;
color: #acb4bf;
text-decoration: none;
}
@media screen and (min-width: 600px) {
.c-media__link {
display: flex;
flex-direction: row;
}
}
@media screen and (min-width: 600px) {
.c-media__image {
position: relative;
flex: 0 1 auto;
min-width: 200px;
}
.c-media__image::before {
content: "";
opacity: 0;
display: block;
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
background: radial-gradient(rgba(50, 141, 252, 0.2), rgba(50, 141, 252, 0.6) 80%, #024495 120%);
transition-property: opacity;
transition-duration: 0.4s;
}
.c-media__link:hover .c-media__image::before {
opacity: 1;
}
}
@media screen and (max-width: 599px) {
* + .c-media__body {
margin-top: 20px;
}
}
@media screen and (min-width: 600px) {
.c-media__body {
display: flex;
flex-direction: column;
}
* + .c-media__body {
margin-left: 4%;
}
}
.c-media__title {
font-size: 1.25rem;
color: #202121;
transition: color 0.3s;
}
@media screen and (min-width: 600px) {
.c-media__title {
font-size: 1.75rem;
}
}
.c-media__link:hover .c-media__title {
color: #328dfc;
}
.c-media__description {
font-size: 0.9375rem;
}
* + .c-media__description {
margin-top: 20px;
}
.c-media__action {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: row;
justify-content: flex-start;
margin-top: auto;
color: #328dfc;
transition: color 0.3s;
}
* + .c-media__action {
padding-top: 20px;
}
.c-media__link:hover .c-media__action {
color: #0352b3;
}
.c-media__label {
font-size: 0.9375rem;
line-height: 1;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.c-media__icon {
position: relative;
top: -2px;
margin-left: 6px;
transition: transform 0.3s;
}
.c-media__link:hover .c-media__icon {
transform: translateX(4px);
}
.c-share__list {
list-style: none;
margin: 0;
display: flex;
flex-direction: row;
gap: 16px;
}
.c-sidenav-slider {
display: -ms-grid;
display: grid;
}
.c-sidenav-slider__header {
text-align: center;
margin-bottom: 32px;
}
.c-sidenav-slider__label {
font-family: "Gilroy", sans-serif;
font-size: 1.125rem;
font-weight: 700;
color: #FF6729;
}
.c-sidenav-slider__title {
font-family: "Gilroy", sans-serif;
font-size: clamp(32px, 8vw, 40px);
line-height: 1.25;
text-wrap: balance;
}
.c-sidenav-slider__main {
--main-padding-block: clamp(16px, 3.5vw, 40px);
--main-padding-inline: clamp(8px, 3vw, 40px);
display: -ms-grid;
display: grid;
grid-row-gap: clamp(32px, 4.5vw, 64px);
margin-inline: clamp(-6%, -80px + 15%, 0px);
padding-block: var(--main-padding-block);
padding-inline: var(--main-padding-inline);
background-color: #F2F5F7;
border-radius: 16px;
}
@media screen and (min-width: 940px) {
.c-sidenav-slider__main {
grid-column-gap: 32px;
align-items: start;
grid-template-columns: minmax(240px, 1fr) minmax(320px, 800px);
}
}
.c-sidenav-slider__nav {
display: flex;
justify-content: space-between;
gap: 8px;
}
.c-sidenav-slider__arrow {
width: 48px;
aspect-ratio: 1;
background-color: transparent;
border: 2px solid #202121;
border-radius: 4px;
cursor: pointer;
transition: 150ms ease;
}
@media screen and (min-width: 940px) {
.c-sidenav-slider__arrow {
display: none;
}
}
.c-sidenav-slider__arrow.is-disabled {
opacity: 0.4;
cursor: not-allowed;
}
.c-sidenav-slider__arrow:hover:not(.is-disabled) {
color: #FF6729;
border-color: #FF6729;
}
.c-sidenav-slider__menu {
flex: 1;
display: flex;
justify-content: center;
list-style: none;
margin-left: 0;
}
@media screen and (min-width: 940px) {
.c-sidenav-slider__menu {
flex: none;
display: -ms-grid;
display: grid;
gap: 8px;
border: none;
}
}
.c-sidenav-slider__button {
--button-icon-color: #202121;
--button-label-color: #202121;
--button-icon-color-active: #328dfc;
--button-label-color-active: #328dfc;
--button-display: none;
font-family: "Gilroy", sans-serif;
font-size: clamp(14px, 3.5vw, 18px);
line-height: 1.2;
font-weight: 700;
display: var(--button-display);
position: relative;
z-index: 0;
align-items: center;
justify-content: center;
padding: 0 1em 0 0;
width: 100%;
gap: 0.5em;
border: 2px solid #202121;
border-radius: 4px;
background-color: transparent;
transition: all 200ms;
}
@media screen and (min-width: 940px) {
.c-sidenav-slider__button {
--button-display: flex;
cursor: pointer;
width: auto;
border: none;
justify-content: flex-start;
}
}
.c-sidenav-slider__button:hover:not(.is-active) {
opacity: 0.6;
}
.c-sidenav-slider__button.is-active {
--button-display: flex;
--button-icon-color: var(--button-icon-color-active,);
--button-label-color: var(--button-label-color-active,);
pointer-events: none;
}
.c-sidenav-slider__button-icon {
display: -ms-inline-grid;
display: inline-grid;
place-items: center;
width: 40px;
flex: none;
aspect-ratio: 1;
background-color: var(--button-icon-bg-color);
border-radius: 4px;
transition: inherit;
pointer-events: none;
--c-token-color: var(--button-icon-color);
--c-token-size: 60%;
}
.c-sidenav-slider__button-label {
color: var(--button-label-color);
transition: inherit;
pointer-events: none;
}
.c-sidenav-slider__content {
display: -ms-grid;
display: grid;
margin-bottom: 16px;
}
.c-sidenav-slider__panel {
--opacity-speed: 300ms;
--max-height-speed: 500ms;
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: 1/1;
pointer-events: none;
opacity: 0;
max-height: 0;
transition: opacity var(--opacity-speed), max-height var(--max-height-speed);
transition-delay: 0s, var(--opacity-speed);
transition-timing-function: linear, ease-out;
}
.c-sidenav-slider__panel > * + * {
margin-top: 16px;
}
.c-sidenav-slider__panel.is-active {
pointer-events: all;
opacity: 1;
max-height: 999px;
transition-delay: var(--max-height-speed), 0s;
}
.c-sidenav-slider__panel-img {
border-radius: 8px;
}
.c-sidenav-slider__panel-desc:not(:first-child) {
padding-top: 8px;
}
.c-sidenav-slider__panel-button {
margin-top: 16px;
}
.c-slide-projector__tray {
display: -ms-grid;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
}
.c-slide-projector__slide {
grid-row: 1;
grid-column: 1;
opacity: 0;
transition: opacity 0.5s;
}
.c-slide-projector__slide:not(.c-slide-projector__slide--prevent-stretch) img {
width: 100%;
}
.c-slide-projector__slide.is-active {
opacity: 1;
}
.ie .c-slide-projector__slide.is-active {
display: block;
}
.ie .c-slide-projector__slide {
display: none;
}
.c-slide-projector__control {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin-top: 10px;
}
.c-slide-projector__button {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin: 5px;
padding: 10px;
color: #328dfc;
background: #ffffff;
border: 1px solid #F6F8F9;
border-radius: 100%;
cursor: pointer;
transition-property: background-color, border, box-shadow;
transition-duration: 0.25s;
outline: none;
}
.c-slide-projector__button:hover {
color: #ffffff;
background-color: #328dfc;
border-color: transparent;
cursor: pointer;
}
.c-slide-projector__button:active {
background-color: #0360d0;
color: #ffffff;
}
.c-slide-projector__button:focus {
box-shadow: 0 1px 6px 0 rgba(112, 123, 140, 0.2);
}
.c-slide-projector__button.previous {
transform: rotate(0.5turn);
}
.c-slide-projector__arrow {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
height: 16px;
font-size: 0;
line-height: 0;
}
.c-slider {
display: -ms-grid;
display: grid;
grid-template-columns: 1fr auto 1fr;
}
.ie .c-slider {
grid-template-columns: 1fr calc(100% - 120px) 1fr;
}
@media screen and (min-width: 600px) {
.c-slider {
grid-template-rows: 1fr auto 1fr auto;
}
}
.c-slider--story {
margin: auto;
}
@media screen and (max-width: 939px) {
.c-slider--story {
max-width: 560px;
}
}
@media screen and (min-width: 1350px) {
.c-slider--story {
max-width: 1000px;
}
}
.c-slider__container {
grid-row: 1;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
grid-column: 1/4;
display: -ms-grid;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
margin: 25px 0;
}
@media screen and (min-width: 600px) {
.c-slider__container {
margin: 25px;
-ms-grid-row: 1;
-ms-grid-row-span: 3;
grid-row: 1/4;
-ms-grid-column: 2;
-ms-grid-column-span: 1;
grid-column: 2/3;
}
}
.c-slider__button {
grid-row: 2;
grid-column: 1;
width: 50px;
height: 50px;
padding: 0;
color: #FF6729;
background-color: white;
border: 1px solid rgba(151, 151, 151, 0.07);
box-shadow: 0 20px 30px rgba(39, 42, 52, 0.1);
border-radius: 100%;
cursor: pointer;
transition: background-color 0.2s;
}
.c-slider__button:active, .c-slider__button:focus {
outline: none;
color: white;
background-color: #cf3c00;
}
.c-slider__button:hover {
background-color: #FF6729;
color: white;
}
.c-slider__button[disabled] {
opacity: 0.3;
}
.c-slider__button.next {
grid-column: 3;
margin-left: auto;
}
@media screen and (min-width: 600px) {
.c-slider__button.next {
grid-row: 2;
}
}
.c-slider-button__icon {
position: relative;
display: inline-block;
}
.previous .c-slider-button__icon {
top: -2px;
}
.previous .c-slider-button__icon svg {
transform: rotate(0.5turn);
}
.c-slider__indicators {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
grid-row: 2;
grid-column: 2;
}
@media screen and (min-width: 600px) {
.c-slider__indicators {
grid-row: 4;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
grid-column: 1/4;
margin-top: 50px;
}
}
.c-slider__indicator {
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 100%;
background: rgba(107, 124, 147, 0.3);
cursor: pointer;
}
.c-slider__indicator.is-active {
background-color: #202121;
}
.c-slider__item {
display: flex;
flex-direction: column;
border-radius: 16px;
box-shadow: 0 20px 30px -10px rgba(112, 123, 140, 0.2);
grid-row: 1;
grid-column: 1;
opacity: 0;
pointer-events: none;
overflow: hidden;
transition: opacity 0.3s;
}
.c-slider__item.is-active {
opacity: 1;
pointer-events: all;
}
@media screen and (min-width: 940px) {
.c-slider__item {
flex-direction: row;
}
}
.c-slider__figure {
width: 100%;
padding-bottom: 45%;
background-size: cover;
background-position: center;
background-color: #F6F8F9;
}
@media screen and (min-width: 940px) {
.c-slider__figure {
flex: 1 1 50%;
width: auto;
padding: 0;
}
}
.c-slider--story .c-slider__figure {
padding-bottom: 125%;
}
@media screen and (min-width: 940px) {
.c-slider--story .c-slider__figure {
padding-bottom: 60%;
}
}
.c-slider__content {
padding: 8%;
}
@media screen and (min-width: 940px) {
.c-slider__content {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
flex: 1 1 50%;
padding: 50px;
}
}
.c-slider__logo {
max-height: 120px;
}
@media screen and (max-width: 939px) {
.c-slider__logo {
display: none;
}
}
.c-slider__logo,
.c-slider__body {
margin-bottom: 25px;
}
.ie .c-slider__body {
width: 100%;
}
.c-star {
padding: 0 2px;
color: #F6F8F9;
line-height: 0;
}
.c-star--full {
color: #FCBD01;
}
.c-star--half {
color: #E6E6E6;
}
.c-star--half .half-star {
fill: #FCBD01;
}
/**
* When we need an animation we can use the following as a basis
*/
.c-status {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
text-decoration: none;
}
.c-status__indicator {
display: block;
width: 10px;
height: 10px;
margin-right: 15px;
background-color: #F8FAFB;
border-radius: 100%;
}
.c-status__indicator[data-status=none] {
background-color: #3ecf8e;
}
.c-status__indicator[data-status=minor] {
background-color: #ffd33a;
}
.c-status__indicator[data-status=major] {
background-color: #ff8100;
}
.c-status__indicator[data-status=critical] {
background-color: #cf3e3e;
}
.c-status__label {
color: #202121;
}
/**
* Subfooter
*/
.c-subfooter {
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #9D9F9F;
}
.c-subfooter--cookie-padding {
padding-bottom: 68px;
}
.c-subfooter__links a {
color: currentColor;
}
.c-subfooter__links a:hover {
color: #202121;
}
@media screen and (min-width: 1250px) {
.c-subfooter__flex {
flex-wrap: wrap;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: row-reverse;
}
}
.c-subfooter__main {
flex-wrap: wrap;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
font-size: 0.875rem;
}
.c-subfooter__copyright,
.c-subfooter__trademark {
padding: 5px 0;
}
.c-subfooter__copyright {
flex-wrap: wrap;
display: flex;
flex-direction: row;
margin-right: 30px;
}
.c-subfooter__trademark {
margin-right: 30px;
}
.c-subfooter__language {
flex-basis: 325px;
margin-left: auto;
padding: 10px 0;
}
@media screen and (max-width: 1249px) {
.c-subfooter__language {
margin-bottom: 10px;
}
}
@media screen and (min-width: 460px) {
.c-subfooter__language {
flex-basis: 210px;
margin-left: auto;
}
}
.c-swap {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 0 auto;
list-style: none;
}
.c-swap__button {
font-size: 0.875rem;
line-height: 1.4285714286;
font-weight: 500;
display: flex;
align-items: center;
position: relative;
padding: 4px 0;
background-color: transparent;
border-color: transparent;
border-style: solid;
border-width: 0;
border-bottom-width: 2px;
color: #333333;
cursor: pointer;
transition: color 0.2s;
}
.c-swap__button + .c-swap__button {
margin-left: 16px;
}
.c-swap__button:hover, .c-swap__button:focus {
outline: none;
color: #acb4bf;
}
.c-swap__button.active {
color: #6D6F70;
border-color: #FF6729;
}
.c-switch {
position: relative;
}
.c-switch__input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.c-switch__label {
font-size: 14px;
line-height: 24px;
font-weight: 700;
display: -ms-inline-grid;
display: inline-grid;
grid-template-columns: 1fr 1fr;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
background: white;
border: 0.5px solid #ECEDEE;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.c-switch__label::before, .c-switch__label::after {
display: flex;
align-items: center;
position: relative;
z-index: 1;
padding: 12px 8px 12px;
line-height: 1;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
transition: color 0.2s;
}
.c-switch__label::before {
padding-left: 11px;
grid-column: 1;
content: attr(data-checked);
border-right: 0.5px solid #ECEDEE;
background-color: white;
z-index: 5;
box-shadow: 1px 3px 9px 0 rgba(0, 0, 0, 0.08);
}
.c-switch__input:checked ~ .c-switch__label::before {
background-color: #F9FAFB;
z-index: 1;
box-shadow: none;
}
.c-switch__label::after {
padding-right: 11px;
padding-left: 13px;
grid-column: 2;
content: attr(data-unchecked);
z-index: 1;
background-color: #F9FAFB;
}
.c-switch__input:checked ~ .c-switch__label::after {
z-index: 5;
background-color: white;
box-shadow: -3px 3px 9px 0 rgba(0, 0, 0, 0.08);
}
.c-tabs {
position: relative;
background: #F2F5F7;
padding-top: 16px;
}
.c-tabs__nav {
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 0;
list-style: none;
display: none;
}
@media screen and (min-width: 640px) {
.c-tabs__nav {
display: flex;
flex-direction: row;
margin: 0 auto;
}
}
.c-tabs__item {
position: relative;
z-index: 1;
}
@media screen and (min-width: 640px) {
.c-tabs__item {
min-width: 215px;
margin: 0 -1px -1px;
border: 2px solid #E6E6E6;
border-bottom: none;
}
}
.c-tabs__item:first-child {
border-radius: 4px 0 0 0;
}
.c-tabs__item:last-child {
border-radius: 0 4px 0 0;
}
.c-tabs__item:first-child:last-child {
border-radius: 4px 4px 0 0;
}
.c-tabs__item:not(.is-active) + .c-tabs__item:not(.is-active) {
border-left: none;
}
.c-tabs__item:hover {
background-color: #E9EBF5;
}
@media screen and (min-width: 640px) {
.c-tabs__item.is-active {
z-index: 2;
border-color: #ffffff;
background-color: #ffffff;
}
}
.c-tabs__link {
display: flex;
align-items: center;
position: relative;
padding: 4px 0;
border: none;
color: #333333;
cursor: pointer;
justify-content: center;
transition: all 150ms;
}
@media screen and (max-width: 639px) {
.c-tabs__link {
display: inline-flex;
}
}
@media screen and (min-width: 640px) and (max-width: 799px) {
.c-tabs__link {
font-size: 0.9375rem;
line-height: 1.3333333333;
font-weight: 700;
}
}
@media screen and (min-width: 640px) {
.c-tabs__link {
padding: 12px clamp(12px, 3vw, 40px);
text-decoration: none;
}
}
.c-tabs__link:hover, .c-tabs__link:focus {
outline: none;
color: #202121;
}
.c-tabs__label {
display: flex;
flex-direction: column;
font-family: "Gilroy", sans-serif;
font-size: 1.125rem;
line-height: 1.5555555556;
font-weight: 600;
}
.c-tabs__label small {
margin-top: -3px;
font-size: 12px;
line-height: 14px;
font-weight: 400;
}
.c-tabs__icon {
margin-right: 8px;
}
.c-tabs__item.is-active .c-tabs__icon {
color: #FF6729;
}
.c-tabs__icon svg {
width: 40px;
height: 40px;
}
.c-tabslider {
position: relative;
z-index: 0;
}
.c-tabslider__heading {
text-align: left;
margin-bottom: 56px;
}
.c-tabslider__heading p {
margin-bottom: 8px;
}
@media screen and (min-width: 600px) {
.c-tabslider__heading {
text-align: center;
}
}
.c-tabslider__heading-title {
font-family: "Gilroy", sans-serif;
font-size: clamp(32px, 5vw, 40px);
line-height: 1.2;
font-weight: bold;
color: #000000;
text-align: center;
}
.c-tabslider__nav {
display: flex;
justify-content: space-between;
flex-direction: row;
width: 100%;
}
@media screen and (min-width: 600px) {
.c-tabslider__nav {
display: flex;
justify-content: space-between;
flex-direction: row;
gap: 12px;
width: 100%;
margin: 0 auto;
border-bottom: 2px solid #ECEDEE;
}
}
.c-tabslider__button {
font-size: 1.125rem;
font-weight: 600;
padding-bottom: 12px;
position: relative;
border: none;
color: #333333;
background: transparent;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: color 0.2s;
width: 25%;
}
@media screen and (max-width: 599px) {
.c-tabslider__button {
display: inline-flex;
margin: 0 auto 14px;
}
}
@media screen and (min-width: 950px) and (max-width: 1099px) {
.c-tabslider--customer-story .c-tabslider__button {
font-size: 1.125rem;
line-height: 1.3333333333;
font-weight: 700;
}
}
@media screen and (min-width: 600px) and (max-width: 799px) {
.c-tabslider__button {
font-size: 0.9375rem;
line-height: 1.3333333333;
font-weight: 700;
}
}
.c-tabslider__button:hover, .c-tabslider__button:focus {
outline: none;
color: #acb4bf;
}
.c-tabslider__button:hover .c-tabslider__dot, .c-tabslider__button:focus .c-tabslider__dot {
border-color: #202121;
}
.c-tabslider__button.is-active {
color: #FF6729;
}
.c-tabslider__dot {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
height: 48px;
width: 48px;
border: 2px solid #D8E1E8;
border-radius: 50%;
background: white;
pointer-events: none;
transition-property: border;
transition-duration: 0.1s;
}
.c-tabslider__dot svg {
width: 18px;
height: 18px;
transition: color 0.1s;
}
.c-tabslider__button.is-active .c-tabslider__dot {
border-color: #FF6729;
}
.c-tabslider__button.is-active .c-tabslider__dot:before {
opacity: 1;
}
.c-tabslider__button.is-active .c-tabslider__dot svg {
color: #FF6729;
}
@media screen and (min-width: 600px) {
.c-tabslider__dot {
top: 0;
left: calc(50% - 22px);
}
}
.c-tabslider--customer-story .c-tabslider__dot {
display: none;
}
.c-tabslider__container {
display: -ms-grid;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
margin-top: 40px;
}
@media screen and (min-width: 600px) {
.c-tabslider__container {
margin-top: 70px;
}
}
.c-tabslider__content {
grid-row: 1;
grid-column: 1;
opacity: 0;
transition: opacity 0.5s;
z-index: 0;
pointer-events: none;
}
.c-tabslider__content.is-active {
opacity: 1;
z-index: 1;
pointer-events: all;
}
/**
* Modifier with buttons that have a circle connected by a line to indicate a 'flow'
*/
.c-tabslider--flow {
margin: 0 auto;
}
.c-tabslider--flow .c-tabslider__nav {
border-bottom: none;
width: unset;
max-width: 870px;
position: relative;
overflow: hidden;
margin-left: auto;
}
.c-tabslider--flow .c-tabslider__nav::after {
position: absolute;
z-index: -2;
content: "";
display: block;
width: 75%;
height: 3px;
top: calc(24px - 1px);
left: 50%;
transform: translateX(-50%);
background-color: #D8E1E8;
}
.c-tabslider--flow .c-tabslider__button {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
flex: 1 1 10px;
align-items: center;
position: relative;
z-index: 0;
text-align: center;
max-width: 170px;
margin: 0;
padding-top: 58px;
padding-left: 0;
}
.ie .c-tabslider--flow .c-tabslider__button {
display: block !important;
flex: inherit !important;
}
@media screen and (min-width: 600px) {
.c-tabslider--flow .c-tabslider__button {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
flex: 1 1 10px;
align-items: center;
position: relative;
z-index: 0;
text-align: center;
max-width: 170px;
margin: 0;
padding-top: 58px;
padding-left: 0;
}
}
@media screen and (min-width: 800px) {
.c-tabslider--flow .c-tabslider__button {
font-size: 1rem;
max-width: 222px;
}
}
.c-tabslider--flow .c-tabslider__button::after {
position: absolute;
z-index: -2;
content: "";
display: block;
height: 56px;
width: 3px;
top: -48px;
left: 13px;
background-color: #E6E6E6;
pointer-events: none;
visibility: hidden;
}
@media screen and (max-width: 599px) {
.c-tabslider--flow .c-tabslider__button:first-child:after {
visibility: hidden;
}
}
@media screen and (min-width: 600px) {
.c-tabslider--flow .c-tabslider__button:first-child:after, .c-tabslider--flow .c-tabslider__button:last-child:after {
width: 60%;
height: 3px;
top: calc(24px - 1px);
left: 50%;
background: #D8E1E8;
visibility: visible;
}
}
@media screen and (min-width: 600px) {
.c-tabslider--flow .c-tabslider__button:last-child:after {
left: auto;
right: 50%;
}
}
.c-tabslider--flow .c-tabslider__button:hover, .c-tabslider--flow .c-tabslider__button:focus {
color: #333333;
}
.c-tabslider--flow .c-tabslider__button.is-active {
color: #202121;
}
.c-tabslider--flow .c-tabslider__button.is-active .c-tabslider__title {
opacity: 1;
}
.c-tabslider__title {
opacity: 0;
}
@media screen and (min-width: 600px) {
.c-tabslider__title {
opacity: 1;
}
}
@media screen and (max-width: 949px) {
.c-tabslider--customer-story .c-tabslider__nav {
display: none;
}
.c-tabslider--customer-story .c-tabslider__container {
display: block;
}
.c-tabslider--customer-story .c-tabslider__content {
opacity: 1;
pointer-events: all;
}
.c-tabslider--customer-story .c-tabslider__content + .c-tabslider__content {
margin-top: 100px;
}
}
@media screen and (max-width: 949px) and (min-width: 800px) {
.c-tabslider--customer-story .c-tabslider__content:nth-child(even) .l-bisection {
grid-row: 1;
grid-auto-flow: dense;
}
.c-tabslider--customer-story .c-tabslider__content:nth-child(even) .l-bisection__item {
grid-column: 3;
}
.c-tabslider--customer-story .c-tabslider__content:nth-child(even) .l-bisection__item:nth-child(2) {
grid-column: 1;
}
}
@media screen and (min-width: 950px) {
.c-tabslider--customer-story .c-tabslider__button:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 4px;
background-color: #FF6729;
opacity: 0;
transition: color 0.2s;
}
.c-tabslider--customer-story .c-tabslider__button.is-active:before {
opacity: 1;
}
}
.c-tabslider--text-image .c-tabslider__dot {
display: none;
}
.c-tabslider--text-image .c-tabslider__container {
margin-top: 96px;
}
@media screen and (max-width: 949px) {
.c-tabslider--text-image .c-tabslider__nav {
display: none;
}
.c-tabslider--text-image .c-tabslider__container {
display: block;
}
.c-tabslider--text-image .c-tabslider__content {
opacity: 1;
pointer-events: all;
}
.c-tabslider--text-image .c-tabslider__content + .c-tabslider__content {
margin-top: 100px;
}
}
@media screen and (max-width: 949px) and (min-width: 800px) {
.c-tabslider--text-image .c-tabslider__content:nth-child(even) .l-bisection {
grid-row: 1;
grid-auto-flow: dense;
}
.c-tabslider--text-image .c-tabslider__content:nth-child(even) .l-bisection__item {
grid-column: 3;
}
.c-tabslider--text-image .c-tabslider__content:nth-child(even) .l-bisection__item:nth-child(2) {
grid-column: 1;
}
}
@media screen and (min-width: 950px) {
.c-tabslider--text-image .c-tabslider__button:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 4px;
background-color: #FF6729;
opacity: 0;
transition: color 0.2s;
}
.c-tabslider--text-image .c-tabslider__button.is-active:before {
opacity: 1;
}
}
.l-bisection__item--align--top {
align-self: start;
}
.c-tabslider__arrow {
color: #FF6729;
opacity: 1;
position: absolute;
top: 5%;
z-index: 20;
cursor: pointer;
border: none;
background-color: transparent;
}
.c-tabslider__arrow.is-right {
right: 0;
}
.c-tabslider__arrow.is-disabled {
opacity: 0.1;
cursor: default;
}
.c-tabslider__label {
color: #FF6729;
font-weight: 700;
font-size: 18px;
font-family: "Gilroy", sans-serif;
}
@media screen and (min-width: 950px) {
.c-tabslider__label {
display: none;
}
}
/* ==========================================================================
* Link button
* ========================================================================== */
/**
* 1. Color gets inherited and used for nested elements with 'currentColor' property
* 2. Reset default button styling
*/
.c-text-button {
display: inline-flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
color: #000000;
padding: 0; /* 2 */
background-color: transparent; /* 2 */
border: none; /* 2 */
cursor: pointer;
text-decoration: none;
transition: color 0.3s;
}
.c-text-button:hover:not(:disabled) {
color: #FF6729;
}
.c-text-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.c-text-button__text {
font-family: "Gilroy", sans-serif;
font-size: 1rem;
line-height: 1;
font-weight: 700;
}
.c-text-button__icon {
display: none;
color: #FF6729;
margin-left: 10px;
transition: transform 0.3s;
}
.c-text-button:hover:not(:disabled) .c-text-button__icon {
transform: translateX(4px);
}
.c-text-button.c-text-button--reverse:hover:not(:disabled) .c-text-button__icon {
transform: translateX(-4px);
}
.c-text-button--icon .c-text-button__icon {
display: block;
}
.c-text-button__icon[data-icon-direction=down] svg {
transform: rotate(0.25turn);
}
.c-text-button:hover:not(:disabled) .c-text-button__icon[data-icon-direction=down] {
transform: none;
}
.c-text-button--reverse .c-text-button__icon {
margin-left: 0;
margin-right: 6px;
}
.c-text-button--reverse .c-text-button__icon svg {
transform: scaleX(-1);
}
.c-text-button--small .c-text-button__text {
font-size: 0.9375rem;
font-weight: 700;
}
.c-text-button--small .c-text-button__icon svg {
transform: scale(0.67);
}
.c-text-button--x-small .c-text-button__text {
font-size: 0.875rem;
font-weight: 700;
}
@media screen and (max-width: 539px) {
.c-text-button--x-small .c-text-button__text {
font-weight: 500;
}
}
.c-text-button--x-small .c-text-button__icon {
margin-left: 5px;
}
.c-text-button--x-small .c-text-button__icon svg {
transform: scale(0.67);
}
.c-text-button--reverse {
flex-direction: row-reverse;
}
.c-text-button--grey {
color: #202121;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px;
}
.c-text-button--grey .c-text-button__text {
font-weight: 500;
}
.c-thumbnail__link {
display: block;
text-decoration: none;
width: 100%;
}
.c-thumbnail__frame {
position: relative;
width: 100%;
padding-bottom: 52.32383808%;
height: 0;
overflow: hidden;
}
.c-thumbnail__frame.has-hover-effect {
position: relative;
}
.c-thumbnail__frame.has-hover-effect::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: radial-gradient(rgba(255, 103, 41, 0.1), rgba(255, 103, 41, 0.4));
opacity: 0;
transition-property: opacity;
transition-duration: 0.4s;
}
.c-thumbnail__link:hover .c-thumbnail__frame.has-hover-effect::after {
opacity: 1;
}
.c-thumbnail--no-image .c-thumbnail__frame {
display: none;
}
.c-thumbnail__frame--customer-story {
padding-bottom: 60%;
background-color: white;
transform: scale3d(1, 1, 1);
transition: transform 0.3s ease-in-out;
}
.c-thumbnail:hover .c-thumbnail__frame--customer-story {
transform: scale3d(1.02, 1.02, 1);
}
.c-thumbnail__image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #F6F8F9;
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
.c-thumbnail__frame.has-hover-effect .c-thumbnail__image {
transform: scale(1);
transition-property: transform, filter;
transition-duration: 0.4s;
}
.c-thumbnail__link.has-hover:hover .c-thumbnail__image {
transform: scale(1.06);
filter: saturate(0%);
}
.c-thumbnail__frame--customer-story .c-thumbnail__image {
background-color: transparent;
background-size: contain;
left: 50%;
top: 30px;
bottom: 30px;
width: 95%;
max-width: 165px;
transform: translateX(-50%);
}
.c-thumbnail__content {
margin-top: 20px;
}
.c-thumbnail__caption {
font-size: 1.25rem;
line-height: 1.4;
font-weight: 700;
font-family: "Gilroy", sans-serif;
color: #202121;
transition: color 0.25s;
}
.c-thumbnail__caption + .c-description {
margin-top: 10px;
}
.c-thumbnail__button {
display: none;
margin-top: 30px;
}
.c-thumbnail--no-image .c-thumbnail__button {
display: block;
}
/**
* Modifier of the thumbnail where the figure gets a little extra styling
*/
.c-thumbnail--pop .c-thumbnail__frame {
border-radius: 16px;
box-shadow: 0 20px 30px -10px rgba(112, 123, 140, 0.2);
overflow: hidden;
}
.c-thumbnail--pop .c-thumbnail__content {
margin-top: 30px;
}
.c-thumbnail__link[href]:hover .c-thumbnail__caption {
color: #FF6729;
}
.c-tile {
border-radius: 16px;
box-shadow: 0 20px 30px -10px rgba(112, 123, 140, 0.2);
display: flex;
flex-direction: column;
background-color: #ffffff;
overflow: hidden;
}
.c-tile__visual {
width: 100%;
height: auto;
aspect-ratio: 432/240;
}
.c-tile__body {
flex: 1;
display: flex;
flex-direction: column;
padding: var(--body-padding, clamp(16px, 8.3%, 32px));
}
.c-tile__body:first-child {
--body-padding: clamp(24px, 12.5%, 48px);
--title-fs: 1.75rem;
}
.c-tile__heading {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.c-tile__icon {
flex: none;
width: 40px;
height: 40px;
background-color: #FF6729;
color: white;
display: -ms-inline-grid;
display: inline-grid;
place-content: center;
place-items: center;
border-radius: 4px;
}
.c-tile__icon svg {
width: 100%;
height: auto;
max-height: 24px;
}
.c-tile__title {
font-family: "Gilroy", sans-serif;
font-size: var(--title-fs, 1.5rem);
line-height: 1;
font-weight: 600;
color: #000000;
}
.c-tile__subtitle {
font-family: "Gilroy", sans-serif;
font-size: 1.125rem;
line-height: 1.33333;
font-weight: 600;
color: #000000;
margin-bottom: 24px;
}
.c-tile__description {
font-size: 1rem;
line-height: 1.5;
}
.c-tile__action {
margin-top: auto;
padding-top: 30px;
}
.c-timeline {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: 0;
}
.c-timeline::before, .c-timeline::after {
content: "";
z-index: 0;
position: absolute;
top: -50px;
left: calc(50% - 1px);
width: 1px;
height: calc(100% + 50px);
background: linear-gradient(to bottom, #ffffff, #c4c4c4 50px);
}
@media screen and (min-width: 500px) {
.c-timeline::before, .c-timeline::after {
left: 20px;
}
}
@media screen and (min-width: 768px) {
.c-timeline::before, .c-timeline::after {
left: 150px;
}
}
.c-timeline::after {
z-index: 1;
top: auto;
bottom: -50px;
height: 50px;
background: linear-gradient(to top, #ffffff, #c4c4c4 50px);
}
@media screen and (max-width: 939px) {
.c-timeline {
margin-top: -75px;
}
}
.c-timeline__item {
position: relative;
z-index: 2;
margin: 80px 0;
overflow: hidden;
text-decoration: none;
}
.c-timeline__item:last-child {
margin-bottom: 0;
}
@media screen and (min-width: 500px) {
.c-timeline__item::before, .c-timeline__item::after {
content: "";
z-index: 0;
position: absolute;
top: 25px;
left: 20px;
width: 25%;
height: 2px;
background-color: #c4c4c4;
}
.c-timeline__item::after {
z-index: 1;
left: 11px;
top: 16px;
width: 20px;
height: 20px;
background-color: #ffffff;
border-radius: 100%;
border: 2px solid #c4c4c4;
}
}
@media screen and (min-width: 768px) {
.c-timeline__item::before {
left: 150px;
}
.c-timeline__item::after {
left: 141px;
}
}
@media screen and (min-width: 500px) {
.c-timeline__container {
width: calc(100% - 80px);
margin-left: auto;
}
}
@media screen and (min-width: 768px) {
.c-timeline__container {
width: 70%;
}
}
.c-timeline__body {
border-radius: 0 0 8px 8px;
padding: 40px;
background-color: #ffffff;
border: 2px solid #c4c4c4;
}
.c-timeline__header {
position: relative;
padding: 15px 20px;
color: white;
background-color: #202121;
border: 2px solid #202121;
border-bottom: none;
border-radius: 8px 8px 0 0;
}
@media screen and (min-width: 768px) {
.c-timeline__header {
text-align: center;
}
}
.c-timeline__date {
font-size: 0.9375rem;
opacity: 0.6;
}
@media screen and (min-width: 768px) {
.c-timeline__date {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
padding-top: 8px;
transform: translateX(-85%);
color: #acb4bf;
font-size: inherit;
opacity: 1;
}
}
.c-timeline__title {
font-size: 1.25rem;
color: white;
}
.c-timeline__image {
width: 100%;
}
.c-timeline__content {
margin-top: 20px;
}
.c-timeline__action {
margin-top: 40px;
text-align: center;
}
.c-timeline__item--divider {
text-align: center;
}
.c-timeline__item--divider::before, .c-timeline__item--divider::after {
visibility: hidden;
}
@media screen and (min-width: 500px) {
.c-timeline__item--divider {
padding-left: 20px;
text-align: left;
}
}
@media screen and (min-width: 768px) {
.c-timeline__item--divider {
padding-left: 150px;
}
}
.c-timeline__year {
display: inline-block;
padding: 10px;
font-weight: 500;
color: #333333;
background-color: #ffffff;
}
@media screen and (min-width: 500px) {
.c-timeline__year {
transform: translateX(-50%);
}
}
.c-timeline__more,
.c-timeline__no-more-available {
position: relative;
margin-top: 80px;
z-index: 1;
text-align: center;
}
@media screen and (min-width: 500px) {
.c-timeline__more,
.c-timeline__no-more-available {
width: calc(100% - 80px);
margin-left: auto;
}
}
@media screen and (min-width: 768px) {
.c-timeline__more,
.c-timeline__no-more-available {
width: 70%;
}
}
.c-timeline__more {
background-color: #ffffff;
}
@media screen and (min-width: 500px) {
.c-timeline__more {
background-color: transparent;
}
}
.c-timeline__no-more-available {
font-size: 1.25rem;
line-height: 1.3;
font-weight: 700;
}
.c-timeline__no-more-available.is-hidden {
display: none;
}
.c-token {
--color: #FF6729;
--size: 38px;
display: inline-flex;
align-items: center;
aspect-ratio: 1;
width: var(--c-token-size, var(--size));
color: var(--c-token-color, var(--color));
background-color: var(--c-token-bg-color, var(--bg-color));
border-radius: var(--c-token-radius, var(--radius));
transition: inherit;
}
.c-token svg {
width: 100%;
height: auto;
}
.c-token--medium {
--size: 48px;
}
.c-token--industryCard {
--size: 58px;
}
.c-token--large {
--size: 72px;
}
.c-tooltip {
position: relative;
z-index: 4;
cursor: help;
}
.c-tooltip:not(.c-tooltip--text, .c-tooltip--element) {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: row;
margin-left: 5px;
width: 16px;
height: 16px;
color: #333333;
background-color: #F6F8F9;
background-image: url("/img/questionmark.svg");
background-repeat: no-repeat;
background-position: center;
border-radius: 100%;
}
.c-tooltip--text {
border-bottom: 2px dotted #FF6729;
}
.c-tooltip--text.c-tooltip--dark {
border-bottom: 2px dotted #202121;
}
.c-tooltip--element:after, .c-tooltip--text:after {
left: -30px;
}
.c-tooltip:before,
.c-tooltip:after {
content: "";
position: absolute;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease-out 0.05s;
}
.c-tooltip:before {
bottom: calc(100% + 3px);
width: 10px;
height: 10px;
border-right: 1px solid #F6F8F9;
border-bottom: 1px solid #F6F8F9;
background-color: #ffffff;
transform: translateY(-6px) rotate(45deg);
z-index: -1;
}
.c-tooltip:after {
font-size: 0.875rem;
line-height: 1.2857142857;
font-weight: 400;
content: attr(data-tooltip);
width: 255px;
bottom: calc(100% + 7px);
padding: 10px;
border-radius: 5px;
border: 1px solid #F6F8F9;
background: #ffffff;
box-shadow: 0 4px 28px 2px rgba(0, 0, 0, 0.1);
transform: translateY(-6px);
z-index: -2;
}
.c-tooltip--dark-pop-up:before, .c-tooltip--dark-pop-up:after {
background-color: #202121;
color: white;
}
.c-tooltip:hover::before,
.c-tooltip:hover::after {
opacity: 1;
transform: none;
}
.c-tooltip:hover::before {
transform: rotate(45deg);
}
.c-tooltip--small:after {
width: 150px;
}
.c-tooltip--modal {
transform: translateY(3px);
}
.c-tooltip--modal::after {
left: 0;
}
.c-tooltip--modal--bottom {
z-index: 5;
}
.c-tooltip--modal--bottom::after {
top: calc(100% + 9px);
bottom: initial;
}
.c-tooltip--modal--bottom::before {
top: calc(100% + 7px);
border: none;
}
.c-topnav-slider {
display: -ms-grid;
display: grid;
}
.c-topnav-slider__header {
text-align: center;
margin-bottom: 32px;
}
.c-topnav-slider__label {
font-family: "Gilroy", sans-serif;
font-size: 1.125rem;
font-weight: 700;
color: #FF6729;
}
.c-topnav-slider__title {
font-family: "Gilroy", sans-serif;
font-size: clamp(32px, 8vw, 40px);
line-height: 1.25;
text-wrap: balance;
}
.c-topnav-slider__main {
--main-padding-block: clamp(16px, 3.5vw, 40px);
--main-padding-inline: clamp(8px, 3vw, 40px);
display: -ms-grid;
display: grid;
grid-row-gap: clamp(16px, 2vw, 32px);
margin-inline: clamp(-6%, -80px + 15%, 0px);
padding-block: var(--main-padding-block);
padding-inline: var(--main-padding-inline);
background-color: #EDF5FF;
border-radius: 16px;
}
.c-topnav-slider__nav {
display: flex;
justify-content: space-between;
gap: 4px;
padding-bottom: 16px;
border-bottom: 1px solid #D0DDE7;
}
@media screen and (min-width: 1080px) {
.c-topnav-slider__nav {
padding-bottom: 24px;
}
}
.c-topnav-slider__arrow {
width: 48px;
aspect-ratio: 1;
background-color: transparent;
border: none;
cursor: pointer;
transition: 150ms ease;
}
@media screen and (min-width: 1080px) {
.c-topnav-slider__arrow {
display: none;
}
}
.c-topnav-slider__arrow.is-disabled {
opacity: 0.4;
cursor: not-allowed;
}
.c-topnav-slider__arrow:hover:not(.is-disabled) {
color: #FF6729;
border-color: #FF6729;
}
.c-topnav-slider__menu {
flex: 1;
width: 100%;
display: flex;
justify-content: space-between;
list-style: none;
margin-left: 0;
}
@media screen and (min-width: 1080px) {
.c-topnav-slider__menu {
flex: none;
display: flex;
}
}
.c-topnav-slider__button {
--button-bg-color: transparent;
--button-icon-color: #202121;
--button-label-color: #202121;
--button-display: none;
--button-bg-color-active: #ffffff;
font-family: "Gilroy", sans-serif;
font-size: clamp(14px, 3.5vw, 18px);
font-weight: 700;
position: relative;
z-index: 0;
display: var(--button-display);
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
border: none;
padding-block: 8px;
padding-left: 0.57em;
padding-right: 1.333em;
background-color: var(--button-bg-color);
border-radius: 100vmax;
transition: all 200ms;
}
@media screen and (min-width: 1080px) {
.c-topnav-slider__button {
--button-display: flex;
--button-icon-color-active: #328dfc;
--button-label-color-active: #328dfc;
font-size: clamp(14px, 1.25vw, 18px);
width: auto;
cursor: pointer;
}
}
.c-topnav-slider__button:hover:not(.is-active) {
opacity: 0.6;
}
.c-topnav-slider__button.is-active {
--button-display: flex;
--button-bg-color: var(--button-bg-color-active,);
--button-icon-color: var(--button-icon-color-active,);
--button-label-color: var(--button-label-color-active,);
color: #328dfc;
pointer-events: none;
}
.c-topnav-slider__button-icon {
display: -ms-inline-grid;
display: inline-grid;
place-items: center;
width: 24px;
aspect-ratio: 1;
transition: inherit;
pointer-events: none;
--c-token-color: var(--button-icon-color);
--c-token-size: 100%;
}
.c-topnav-slider__button-label {
color: var(--button-label-color);
transition: inherit;
pointer-events: none;
}
.c-topnav-slider__content {
display: -ms-grid;
display: grid;
margin-bottom: 16px;
}
.c-topnav-slider__panel {
--opacity-speed: 500ms;
--max-height-speed: 300ms;
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: 1/1;
display: -ms-grid;
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 32px;
pointer-events: none;
opacity: 0;
max-height: 0;
transition: opacity var(--opacity-speed), max-height var(--max-height-speed);
transition-delay: 0s, var(--opacity-speed);
}
@media screen and (min-width: 1080px) {
.c-topnav-slider__panel {
grid-template-columns: minmax(360px, 1fr) minmax(400px, 660px);
grid-column-gap: clamp(48px, -40px + 9vw, 100px);
}
}
.c-topnav-slider__panel.is-active {
pointer-events: all;
opacity: 1;
max-height: 999px;
transition-delay: var(--max-height-speed), 0s;
}
.c-topnav-slider__panel-img {
border-radius: 8px;
}
.c-topnav-slider__panel-body > * + * {
margin-top: 16px;
}
@media screen and (min-width: 1080px) {
.c-topnav-slider__panel-body {
align-self: center;
order: -1;
}
}
.c-topnav-slider__panel-title {
font-size: clamp(24px, 6vw, 28px);
}
.c-trademark {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: row;
font-size: 0.875rem;
color: #9D9F9F;
text-decoration: none;
transition: color 0.15s ease-in-out;
}
.c-trademark:hover {
color: #202121;
}
.c-trademark:hover .komma-emblem {
transform-origin: 12px 12px;
animation: logo-spin 1.8s linear infinite;
}
.c-trademark__text {
margin-right: 7px;
}
@keyframes logo-spin {
from {
transform: rotate(0);
}
to {
transform: rotate(-1turn);
}
}
.c-video {
width: 100%;
max-width: 960px;
margin: auto;
}
.c-video__placeholder {
position: relative;
height: 0;
width: 100%;
padding-bottom: 53.6%;
background-color: #F6F8F9;
}
.c-video__placeholder--modal {
padding-bottom: 56.3%;
}
.c-video__iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-youtube-modal {
display: block;
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
opacity: 0;
pointer-events: none;
}
.is-youtube-modal-active .c-youtube-modal {
z-index: 200;
opacity: 1;
pointer-events: all;
}
.c-youtube-modal__scroller {
position: relative;
z-index: 2;
width: 95%;
max-width: 800px;
padding: 5vw 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
margin: 0 auto;
}
.c-youtube-modal__shader {
position: fixed;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(32, 33, 33, 0);
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.is-youtube-modal-active .c-youtube-modal__shader {
background-color: rgba(32, 33, 33, 0.95);
}
.is-youtube-modal-fade-out .c-youtube-modal__shader {
transition: background-color 0.3s ease-in-out 0.15s;
background-color: rgba(32, 33, 33, 0);
}
.c-youtube-modal__main {
position: relative;
z-index: 3;
width: 100%;
background: white;
border-radius: 24px;
box-shadow: 0 20px 30px -10px rgba(112, 123, 140, 0.2);
opacity: 0;
transform: translate3d(0, 30px, 0);
transition: opacity 0.3s ease-in-out 0.3s, transform 0.3s ease-in-out 0.3s;
}
.is-youtube-modal-active .c-youtube-modal__main {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.is-youtube-modal-fade-out .c-youtube-modal__main {
transition-delay: 0s;
opacity: 0;
}
.c-youtube-modal__close-button {
position: absolute;
top: 43px;
right: 43px;
width: 20px;
height: 20px;
cursor: pointer;
transform: rotate(0.125turn);
opacity: 0.3;
transition: opacity 0.2s, transform 0.4s;
}
.c-youtube-modal__close-button:before, .c-youtube-modal__close-button:after {
content: "";
position: absolute;
left: 0;
top: calc(50% - 3px);
display: block;
background-color: white;
width: 100%;
height: 3px;
}
.c-youtube-modal__close-button:after {
transform: rotate(0.25turn);
}
.c-youtube-modal__close-button:hover {
opacity: 0.6;
transform: rotate(0.375turn);
}
.c-youtube-modal__navigation {
margin-bottom: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c-youtube-modal__navigation > * + * {
margin-left: 5px;
}
.c-youtube-modal__navigation.is-hidden {
opacity: 0;
margin-top: 0;
}
.c-youtube-modal__button {
display: flex;
justify-content: center;
align-items: center;
height: 28px;
width: 32px;
border: 2px solid currentColor;
color: rgba(255, 255, 255, 0.4);
background-color: transparent;
cursor: pointer;
transition: color 0.3s, border 0.3s;
}
.c-youtube-modal__button svg {
transform: translate3d(0, 0, 0);
transition: transform 0.3s;
}
.c-youtube-modal__button:focus {
outline-color: rgba(109, 147, 202, 0.25);
}
.c-youtube-modal__button:hover {
color: rgba(255, 255, 255, 0.8);
}
.c-youtube-modal__button:hover svg {
transform: translate3d(2px, 0, 0);
}
.c-youtube-modal__button.previous {
transform: scaleX(-1);
}
.c-youtube-modal__swirl {
position: absolute;
left: 0;
bottom: 0;
display: flex;
align-items: flex-end;
width: 100%;
transform: translateY(1px);
}
.c-youtube-modal__swirl svg {
width: 100%;
}
.c-youtube-modal__title {
color: white;
}
.c-youtube-modal__subtitle {
padding: 30px 42px 30px;
font-size: 1.25rem;
line-height: 1.4;
font-weight: 700;
color: #202121;
border-bottom: 2px solid #F6F8F9;
}
.c-youtube-modal__subtitle--colored {
background-color: #F6F8F9;
border-bottom: none;
}
.c-youtube-modal__description,
.c-youtube-modal__requirements {
padding: 40px 42px;
background: white;
}
.c-youtube-modal__footer {
display: flex;
justify-content: space-between;
flex-wrap: wrap-reverse;
padding: 40px;
background-color: #F6F8F9;
border-radius: 0 0 16px 16px;
}
.c-youtube-modal__footer > * {
flex-shrink: 0;
margin: 10px 0;
}
.c-hero-rating {
border-radius: 16px;
position: relative;
margin: 0 auto;
max-width: 555px;
overflow: hidden;
display: inline-block;
}
.c-hero-rating__spacing {
position: relative;
}
.c-hero-rating__spacing .c-hero-rating__top-bg {
top: 0;
height: 50%;
}
.c-hero-rating__spacing .c-hero-rating__bottom-bg {
bottom: 0;
height: 50%;
}
.c-hero-rating__spacing--top {
padding-top: clamp(48px, 8vw, 100px);
}
.c-hero-rating__spacing--top .c-hero-rating__top-bg {
height: calc(50% + clamp(48px, 8vw, 100px)/2);
}
.c-hero-rating__spacing--top .c-hero-rating__bottom-bg {
height: calc(50% - clamp(48px, 8vw, 100px)/2);
}
.c-hero-rating__spacing--bottom {
padding-bottom: clamp(48px, 8vw, 100px);
}
.c-hero-rating__spacing--bottom .c-hero-rating__top-bg {
height: calc(50% - clamp(48px, 8vw, 100px)/2);
}
.c-hero-rating__spacing--bottom .c-hero-rating__bottom-bg {
height: calc(50% + clamp(48px, 8vw, 100px)/2);
}
.c-hero-rating__spacing--both {
padding-top: clamp(48px, 8vw, 100px);
padding-bottom: clamp(48px, 8vw, 100px);
}
.c-hero-rating__top-bg,
.c-hero-rating__bottom-bg {
position: absolute;
left: 0;
width: 100%;
}
.c-hero-rating__bg--grey {
background-color: #F2F5F7;
}
.c-hero-rating__bg--black {
background: #1B1B1B;
}
@media screen and (max-width: 939px) {
.c-hero-rating__spacing-top {
padding-top: 60px;
}
.c-hero-rating__spacing-top .c-hero-rating__top-bg {
height: calc(50% + 30px);
}
.c-hero-rating__spacing-top .c-hero-rating__bottom-bg {
height: calc(50% - 30px);
}
.c-hero-rating__spacing--bottom {
padding-bottom: 60px;
}
.c-hero-rating__spacing--bottom .c-hero-rating__top-bg {
height: calc(50% - 30px);
}
.c-hero-rating__spacing--bottom .c-hero-rating__bottom-bg {
height: calc(50% + 30px);
}
.c-hero-rating__spacing--both {
padding-top: 60px;
padding-bottom: 60px;
}
}
.c-hero-rating__link {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 0 20px 0;
text-decoration: none;
color: #6D6F70;
font-size: 12px;
line-height: 18px;
}
@media screen and (min-width: 670px) {
.c-hero-rating__link {
flex-direction: row;
padding: 30px 0 0 0;
justify-content: flex-start;
}
}
.c-hero-rating__logos {
display: flex;
align-items: center;
justify-content: center;
}
.c-hero-rating__logos img {
filter: grayscale(100%);
max-height: 29px;
transition: all 0.1s ease-in-out;
}
.c-hero-rating__logos-link {
margin: 0 10px;
}
.c-hero-rating__logos-link:hover img {
filter: grayscale(0);
}
.c-hero-rating_software-advice img {
max-height: 20px;
}
.c-hero-rating_software-advice_capterraLink img {
max-height: 24px;
}
.c-hero-rating__stars {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
padding: 0 20px 0 0;
height: 60px;
transform: translateY(-2px);
}
@media screen and (min-width: 670px) {
.c-hero-rating__stars::after {
content: "";
display: block;
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: 1px;
background-color: #F6F8F9;
}
}
.c-hero-rating__stars .c-star path {
transition-duration: 0.15s;
transform: translate3d(0, 0, 0);
}
.c-hero-rating__stars .c-star:nth-child(1) path {
transition-delay: 0s;
}
.c-hero-rating__stars .c-star:nth-child(2) path {
transition-delay: 0.1s;
}
.c-hero-rating__stars .c-star:nth-child(3) path {
transition-delay: 0.2s;
}
.c-hero-rating__stars .c-star:nth-child(4) path {
transition-delay: 0.3s;
}
.c-hero-rating__stars .c-star:nth-child(5) path {
transition-delay: 0.4s;
}
.c-hero-rating__stars.js-partly-in-viewport .full-star {
transform: translate3d(-100%, -80%, 0);
}
.c-hero-rating__stars.js-partly-in-viewport .half-star {
transform: translate3d(-100%, -80%, 0);
}
.c-hero-rating__label {
padding: 0 40px;
text-align: center;
color: #333333;
transition: color 0.2s;
}
.c-hero-rating__link:hover .c-hero-rating__label {
color: #FF6729;
}
@media screen and (min-width: 670px) {
.c-hero-rating__label {
padding: 0 20px;
text-align: left;
}
}
.c-hero-rating__icon {
position: absolute;
bottom: 0;
right: 0;
height: 60px;
width: 60px;
}
.c-hero-rating__icon::before {
content: "";
display: block;
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(135deg, transparent 50%, #F2F4F6 50%, #F8FAFB 55%);
}
.c-hero-rating__arrow {
position: absolute;
right: 15px;
bottom: 11px;
line-height: 0;
color: #9D9F9F;
transition: color, opacity;
transition-duration: 0.25s;
opacity: 0.5;
}
.c-hero-rating__link:hover .c-hero-rating__arrow {
color: #FF6729;
opacity: 1;
}
.app-buttons {
display: flex;
margin: 20px 0 20px 0 !important;
}
@media screen and (min-width: 1024px) {
.app-buttons {
margin: 40px 0 48px 0 !important;
}
}
.app-buttons a {
text-decoration: none;
}
.app-buttons a:first-of-type {
margin-right: 20px;
}
.app-buttons img {
max-width: 160px;
width: 100%;
height: auto;
}
.app-buttons__hr {
border: 1px solid rgba(208, 211, 215, 0.8);
margin-bottom: 30px;
}
.app-buttons__title {
display: block;
font-size: 18px;
line-height: 18px;
font-weight: 700;
}
.app-buttons__title + * {
margin-top: 10px !important;
}
.c-pricing-dropdown {
display: none;
position: relative;
background: #F2F5F7;
padding-bottom: 32px;
}
@media screen and (max-width: 639px) {
.c-pricing-dropdown {
display: flex;
flex-direction: column;
}
}
.c-pricing-dropdown__item {
background: white;
height: 56px;
width: 328px;
margin: auto;
display: flex;
align-items: center;
padding-left: 14px;
}
.c-pricing-dropdown__item.is-active {
background: #F9FAFB;
}
.c-pricing-dropdown__item--first {
position: relative;
border: 2px solid #202121;
border-radius: 3px;
}
.c-pricing-dropdown__item--first img {
width: 12px;
position: absolute;
right: 14px;
}
.c-pricing-dropdown__item--first .c-pricing-dropdown__label {
font-size: 1rem;
font-weight: 600;
font-style: normal;
text-align: left;
}
.c-pricing-dropdown__item--first.is-open img {
transform: rotate(180deg);
}
.c-pricing-dropdown__nav {
display: none;
list-style: none;
}
.c-pricing-dropdown__link {
text-decoration: none;
color: black;
width: 100%;
}
.c-pricing-dropdown__label {
font-size: 0.875rem;
font-weight: 500;
font-style: normal;
text-align: left;
}
.c-pricing-dropdown__label small {
font-size: 0.625rem;
font-weight: 400;
font-style: normal;
text-align: left;
}
.c-award-badges {
overflow: hidden;
margin-bottom: 100px;
margin-top: 100px;
}
@media screen and (max-width: 799px) {
.c-award-badges {
overflow: visible;
}
}
.c-award-badges--mt0 {
margin-top: 0;
}
.c-award-badges__heading-wrapper {
width: -moz-max-content;
width: max-content;
max-width: 100%;
margin: 0 auto;
position: relative;
padding: 0 30px;
}
.c-award-badges__heading-wrapper:after, .c-award-badges__heading-wrapper:before {
content: "";
position: absolute;
top: 50%;
right: 100%;
width: 50vw;
height: 1px;
background-color: #E3E3E3;
}
.c-award-badges__heading-wrapper:after {
left: 100%;
right: 0;
}
@media screen and (max-width: 799px) {
.c-award-badges__heading-wrapper {
margin: 0 auto;
padding: 0;
}
.c-award-badges__heading-wrapper:before, .c-award-badges__heading-wrapper:after {
display: none;
}
}
.c-award-badges__heading {
color: #6D6E6F;
text-transform: uppercase;
font-family: Inter, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: 500;
line-height: 12px;
letter-spacing: 2px;
text-align: center;
}
.c-award-badges__badges {
display: -ms-grid;
display: grid;
row-gap: 24px;
margin-top: 36px;
}
@media screen and (min-width: 330px) {
.c-award-badges__badges {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 700px) {
.c-award-badges__badges {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width: 1140px) {
.c-award-badges__badges {
grid-template-columns: repeat(6, 1fr);
}
}
.c-award-badges__badges img {
justify-self: center;
display: block;
width: 80%;
aspect-ratio: 1;
-o-object-fit: contain;
object-fit: contain;
}
.c-industry-cards {
display: -ms-grid;
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
@media screen and (min-width: 700px) {
.c-industry-cards {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: 1000px) {
.c-industry-cards {
grid-template-columns: repeat(3, 1fr);
}
}
.c-update-card {
border-radius: 16px;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
background-color: #ffffff;
text-decoration: none;
cursor: pointer;
transition: background-color 0.4s, box-shadow 0.4s;
}
.c-update-card:hover {
background-color: #F2F5F7;
box-shadow: 0px 100px 80px rgba(91, 91, 91, 0.07), 0px 30.1471px 24.1177px rgba(91, 91, 91, 0.0456112), 0px 12.5216px 10.0172px rgba(91, 91, 91, 0.035), 0px 4.5288px 3.62304px rgba(91, 91, 91, 0.0243888);
}
.c-update-card.hidden {
display: none;
}
.c-update-card__image {
aspect-ratio: 616/323;
border-radius: 16px 16px 0 0;
-o-object-fit: cover;
object-fit: cover;
}
.c-update-card__body {
padding: 40px;
color: #202121;
}
.c-update-card__date {
color: #9D9F9F;
margin: 8px 0;
}
/* 6 - ORGANISMS
* Large blocks composed of multiple components.
=========================================================== */
/** ==========================================================================
* Organisms
* =========================================================================*/
.o-action-panel {
display: -ms-grid;
display: grid;
row-gap: clamp(1.5em, 4vw, 3em);
}
.o-block {
padding-block: clamp(48px, 8vw, 100px);
}
.o-block-bg {
padding-block: clamp(48px, 8vw, 100px);
background-color: #F2F5F7;
}
.o-block-bg-small {
background-color: #F2F5F7;
}
.o-block-bg-black {
padding-block: clamp(48px, 8vw, 100px);
background: #1B1B1B;
}
.o-block-bg-top {
background: linear-gradient(to bottom, #F2F5F7 50%, transparent 50.1%);
}
.o-block-bg-bottom {
background: linear-gradient(to top, #F2F5F7 50%, transparent 50.1%);
}
.o-block--no-overflow {
overflow: hidden;
}
.o-block--light-shade {
background-color: #FAFBFC;
}
/**
* No styling needed, but the following class can be used to create a larger gap between o-blocks.
* Margin and padding of consecutive blocks creates the extra gap when ->
* an empty div with this class is placed between two '.o-block' or '.o-block-bg' divs.
*/
.o-block-gap {
height: clamp(48px, 8vw, 100px)/4;
}
@media screen and (max-width: 939px) {
.o-block-gap {
height: clamp(48px, 8vw, 100px)/4;
}
}
.o-block-gap--bg {
background-color: #F2F5F7;
}
.o-contact__information > * + * {
margin-top: 1.5em;
}
.o-contact__buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
}
.o-contact__business {
font-size: 0.9375rem;
margin-top: 2em;
padding-top: 2em;
border-top: 1px solid #F6F8F9;
}
.o-contact__offices {
margin-top: 1.5em;
}
@media screen and (min-width: 400px) {
.o-contact__offices {
display: flex;
justify-content: space-between;
flex-direction: row;
}
}
@media screen and (max-width: 399px) {
.o-contact__office {
margin-top: 1.5em;
}
}
@media screen and (min-width: 400px) {
.o-contact__office {
width: calc(50% - 10px);
}
}
.o-contact__office > * + * {
margin-top: 1em;
}
.o-contact__office-heading {
font-size: 1.125rem;
line-height: 1.3333333333;
color: #333333;
letter-spacing: 1px;
font-variant: small-caps;
}
.o-contact__commercial {
flex-wrap: wrap;
display: flex;
flex-direction: row;
font-size: 0.9375rem;
line-height: 1.8666666667;
font-weight: 400;
}
.o-contact__commercial dt {
font-weight: 500;
width: 140px;
}
.o-contact__commercial dd {
width: calc(100% - 140px);
}
.o-integrations__options {
display: flex;
flex-wrap: wrap;
max-width: 1000px;
margin: 64px auto 0;
align-items: center;
justify-content: center;
}
.o-integrations__link {
display: block;
width: 115px;
margin: 0 -4px;
}
@media screen and (min-width: 420px) {
.o-integrations__link {
width: 150px;
}
}
.o-integrations__frame {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.o-integrations__image {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.o-integrations__button {
margin-top: 48px;
text-align: center;
}
.o-stories--margin-bottom {
margin-bottom: 8.333%;
}
.o-stories--no-stories {
padding-top: 80px;
}
.o-stories__footer {
margin-top: 8.333%;
}
.o-modal {
z-index: 1500;
opacity: 0;
pointer-events: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.o-modal.is-active {
opacity: 1;
pointer-events: auto;
}
.o-modal.fade-out {
transition: background-color 0.3s ease-in-out 0.15s;
background-color: rgba(32, 33, 33, 0);
}
.o-modal__shader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(32, 33, 33, 0.32);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.o-modal__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
overflow: auto;
background-color: white;
width: 91.4vw;
max-width: 1080px;
max-height: 95vh;
border-radius: 4px;
}
.o-modal__header {
padding: 16px 24px;
background-color: #202121;
color: #ffffff;
position: sticky;
z-index: 6;
top: 0;
left: 0;
right: 0;
}
.o-modal__close {
position: absolute;
top: 15px;
right: 16px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
background-image: url("/img/close-white.svg");
background-size: 14px;
background-repeat: no-repeat;
background-position: center;
border: none;
padding: 0;
transition: all 125ms ease-in-out;
cursor: pointer;
}
.o-modal__close:hover {
transform: scale(1.2) rotate(0.25turn);
}
.o-modal__preheading {
font-family: "Inter", sans-serif;
font-size: 0.875rem;
font-weight: 500;
}
.o-modal__heading {
font-size: 1.5rem;
font-weight: 600;
margin-top: 8px;
}
@media screen and (max-width: 539px) {
.o-modal__heading {
font-size: 1.375rem;
font-weight: 600;
}
}
.o-modal__table {
font-size: 0.875rem;
font-weight: 400;
border-collapse: collapse;
width: 100%;
}
.o-modal__thead {
background-color: #ffffff;
position: sticky;
z-index: 6;
top: 66px;
left: 0;
right: 0;
}
.o-modal__thead-cell {
min-width: 165px;
box-shadow: inset 1px -1px 0 #eaeef0;
}
.o-modal__table-subheader {
font-size: 1rem;
font-weight: 500;
background-color: #F2F5F7;
display: flex;
justify-content: space-between;
width: 100%;
padding: 16px 24px;
}
.o-modal__tbody tr td:first-child {
width: 300px;
}
.o-modal__tbody-cell {
box-shadow: inset 1px -1px 0 #eaeef0;
padding: 16px 24px;
text-align: center;
}
.o-modal__label-column {
text-align: left;
}
.o-modal__feature-icon {
display: inline-flex;
width: 17px;
height: 13px;
background-image: url(/img/checked.svg);
background-repeat: no-repeat;
}
.o-modal__feature-icon.is-excluded {
width: 13px;
background-image: url(/img/unchecked.svg);
}
.o-other-models__title {
margin-bottom: 40px;
}
.o-other-models__grid > * + * {
margin-top: 60px;
}
@media screen and (min-width: 850px) {
.o-other-models__grid {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
}
.o-other-models__grid > * + * {
margin-top: 0;
margin-left: 30px;
margin-right: 0;
}
}
@media screen and (min-width: 950px) {
.o-other-models__grid > * + * {
margin-left: 50px;
}
}
@media screen and (min-width: 1150px) {
.o-other-models__grid > * + * {
margin-left: 80px;
}
}
.o-other-models__item {
width: 100%;
max-width: 425px;
}
@media screen and (max-width: 849px) {
.o-other-models__item {
margin-left: auto;
margin-right: auto;
}
}
@media screen and (min-width: 850px) {
.o-other-models__item {
margin-bottom: 0;
width: calc((100% - 60px) / 3);
max-width: none;
}
}
@media screen and (min-width: 950px) {
.o-other-models__item {
width: calc((100% - 100px) / 3);
}
}
@media screen and (min-width: 1150px) {
.o-other-models__item {
width: calc((100% - 160px) / 3);
}
}
.o-customer-story-products {
padding-bottom: 50px;
}
.o-customer-story-products__heading {
margin-bottom: 100px;
}
.o-update-grid__tabs {
display: flex;
justify-content: center;
border-bottom: 2px solid rgba(208, 221, 231, 0.25);
margin-bottom: 32px;
}
.o-update-grid__tabs > div {
display: flex;
padding-bottom: 12px;
margin-bottom: -12px;
}
@media screen and (max-width: 1099px) {
.o-update-grid__tabs > div {
overflow-x: scroll;
}
}
.o-update-grid__tab {
margin-right: 8px;
padding: 12px 20px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
font-size: 1rem;
white-space: nowrap;
color: #202121;
text-decoration: none;
}
.o-update-grid__tab:last-of-type {
margin-right: 0;
}
.o-update-grid__tab.active {
background-color: rgba(208, 221, 231, 0.25);
}
.o-update-grid__tab:hover:not(.active) {
background-color: rgba(208, 221, 231, 0.1);
cursor: pointer;
}
.o-update-grid__items {
display: -ms-grid;
display: grid;
gap: 40px;
}
@media screen and (min-width: 700px) {
.o-update-grid__items {
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: 1200px) {
.o-update-grid__items {
grid-template-columns: 1fr 1fr 1fr;
}
}
.o-table {
overflow-x: auto;
}
.o-table__table {
--colums: 4;
--min-column-width: min(80vw, 210px);
--odd-column-bg-color: #f2f5f7;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-radius: 16px 16px;
overflow: hidden;
}
@media screen and (max-width: 899px) {
.o-table__table {
overflow: scroll;
}
}
.o-table__head {
font-size: 1.375rem;
font-family: "Gilroy", sans-serif;
color: #202121;
-webkit-hyphens: auto;
hyphens: auto;
}
.o-table__head-item {
width: calc(100% / var(--colums));
min-width: var(--min-column-width);
padding: 40px 5px 20px;
}
.o-table__head-item:nth-child(odd) {
background-color: var(--odd-column-bg-color);
}
.o-table__body-item {
width: calc(100% / var(--colums));
min-width: var(--min-column-width);
padding-block: 16px;
padding-inline: clamp(16px, 4%, 42px);
-webkit-hyphens: auto;
hyphens: auto;
}
.o-table__body-item:nth-child(odd) {
background-color: var(--odd-column-bg-color);
}
.o-table__anchor {
text-decoration: none;
color: inherit;
}
.o-tiles__label {
font-family: "Gilroy", sans-serif;
font-size: 1.125rem;
font-weight: bold;
color: #FF6729;
text-align: center;
margin-bottom: 8px;
}
.o-tiles__title {
font-family: "Gilroy", sans-serif;
font-size: clamp(32px, 5vw, 40px);
line-height: 1.2;
font-weight: bold;
color: #000000;
text-align: center;
}
.o-tiles__grid {
display: flex;
flex-wrap: wrap;
grid-gap: 24px 16px;
justify-content: center;
}
.o-tiles__grid > * {
flex: 1 1 320px;
max-width: 432px;
}
* + .o-tiles__grid {
margin-top: clamp(32px, 5vw, 72px);
}
.o-usp__label {
color: #FF6729;
text-align: center;
font-size: 18px;
font-weight: bold;
font-family: "Gilroy", sans-serif;
}
.o-usp__title {
text-align: center;
color: #000000;
font-size: clamp(32px, 5vw, 40px);
}
.o-usp__title:not(:first-child) {
margin-top: 8px;
}
.o-usp__content:not(:first-child) {
margin-top: min(6vw, 24px);
}
.o-usp__action {
text-align: center;
margin-top: clamp(40px, 5vw, 72px);
}
/* 7 - Templates
* Override styling for a specific template
=========================================================== */
/** ==========================================================================
* Templates
* =========================================================================*/
.t-about__components {
max-width: 800px;
margin: auto;
}
.t-blog__footer {
margin-top: 8.333%;
}
.t-jobs {
max-width: 850px;
margin: auto;
}
@media screen and (max-width: 949px) {
#jobs .o-blocks {
padding-top: 60px;
}
}
.t-customer-story {
position: relative;
}
.t-customer-story:before {
content: "";
position: absolute;
z-index: -2;
left: 0;
top: 0;
display: block;
width: 100%;
height: calc(100% - 1100px);
background: linear-gradient(188.92deg, #F2F5F7 12.57%, rgba(242, 248, 255, 0) 80.84%);
}
.t-integrations__content .c-thumbnail.card-like {
padding: 45px;
width: 100%;
text-align: center;
background-color: #ffffff;
border-radius: 16px;
transition: box-shadow 0.3s;
}
.t-integrations__content .c-thumbnail.card-like:hover {
box-shadow: 0 5px 30px -10px rgba(112, 123, 140, 0.5);
}
.t-integrations__content .c-thumbnail.card-like .c-thumbnail__image {
background-color: transparent;
background-size: contain;
}
.t-integrations__content .c-thumbnail.card-like .c-thumbnail__caption {
margin-bottom: 15px;
}
.t-integrations__content .c-thumbnail.card-like .c-thumbnail__text {
font-size: 1.25rem;
line-height: 1.4;
color: #707b8c;
transition: color 0.25s;
}
.t-careers-job__contain {
width: 85.7142857143%;
max-width: 750px;
margin: auto;
}
.t-careers-job__heading {
display: flex;
align-items: center;
justify-content: center;
height: 250px;
border-radius: 25px;
box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.6);
background-color: white;
margin-bottom: -175px;
}
@media screen and (max-width: 1059px) {
.t-careers-job__heading {
width: 100%;
max-width: none;
padding: 10px 20px;
}
}
.t-careers-job__heading-title {
font-size: 2.5rem;
color: #202121;
text-align: center;
margin-bottom: 20px;
}
@media screen and (min-width: 900px) {
.t-careers-job__heading-title {
font-size: 2.8125rem;
}
}
@media screen and (min-width: 1200px) {
.t-careers-job__heading-title {
font-size: 3rem;
}
}
.t-careers-job__sub-heading {
display: flex;
justify-content: center;
color: #4c4b4b;
}
.t-careers-job__sub-heading-icon {
position: relative;
width: 16px;
top: -2px;
}
.t-careers-job__sub-heading-icon svg {
width: 100%;
}
.t-careers-job__sub-heading-text {
font-size: 1.25rem;
margin-left: 8px;
}
.t-careers-job__subheader {
margin-top: 160px;
padding-bottom: 40px;
border-bottom: 1px solid #F8FAFB;
}
@media screen and (max-width: 499px) {
.t-careers-job__subheader > * + * {
margin-top: 40px;
}
}
@media screen and (min-width: 500px) {
.t-careers-job__subheader {
display: flex;
justify-content: space-between;
align-items: center;
}
}
@media screen and (min-width: 940px) {
.t-careers-job__subheader {
margin-top: 110px;
}
}
.t-careers-job__subfooter {
position: relative;
padding: 120px 0;
}
@media screen and (min-width: 500px) {
.t-careers-job__subfooter {
display: flex;
justify-content: space-between;
align-items: center;
}
}
@media screen and (max-width: 499px) {
.t-careers-job__subfooter > * + * {
margin-top: 40px;
}
}
@media screen and (max-width: 1299px) {
.t-careers-job__subfooter {
margin-bottom: 120px;
padding: 120px 0 60px;
}
}
.t-careers-job__api-content {
width: 100%;
max-width: 750px;
margin-left: auto;
margin-right: auto;
}
.t-careers-job__subfooter-top {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 53px;
height: 53px;
border-radius: 24px;
color: #FF6729;
box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.6);
transition: all 0.2s;
}
.t-careers-job__subfooter-top svg {
transform: translate3d(0, -2px, 0);
width: 16px;
height: 10px;
}
.t-careers-job__subfooter-top:hover {
background-color: #FF6729;
color: white;
}
@media screen and (max-width: 499px) {
.t-careers-job__subfooter-top {
left: 0;
bottom: -40px;
}
}
@media screen and (min-width: 500px) and (max-width: 1299px) {
.t-careers-job__subfooter-top {
right: 0;
bottom: -40px;
}
}
@media screen and (min-width: 1300px) {
.t-careers-job__subfooter-top {
right: -10vw;
top: calc(50% - 26px);
}
}
.t-webinars {
padding: 100px 0 232px;
}
.t-webinars--sub {
padding: 64px 0;
}
.t-webinars__image {
max-width: 760px;
margin: auto;
}
.t-webinars__heading {
margin: 68px 0 148px;
}
.t-webinars__heading .c-heading__subtitle {
max-width: 720px;
margin: 24px auto 0;
}
@media screen and (max-width: 939px) {
.t-webinars__heading {
margin-bottom: 68px;
}
}
.t-webinars__items--tabs {
display: none;
}
.t-webinars__items--tabs.active {
display: flex !important;
}
.t-webinars__tabs {
flex: 1;
display: flex;
justify-content: center;
border-bottom: 2px solid rgba(208, 221, 231, 0.25);
margin-bottom: 32px;
}
.t-webinars__tabs > div {
display: flex;
padding-bottom: 12px;
margin-bottom: -12px;
}
@media screen and (max-width: 767px) {
.t-webinars__tabs > div {
overflow-x: scroll;
}
}
.t-webinars__tabs-tab {
color: #202121;
text-decoration: none;
padding: 12px 20px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
margin-right: 8px;
font-size: 1rem;
white-space: nowrap;
}
.t-webinars__tabs-tab:last-of-type {
margin-right: 0;
}
.t-webinars__tabs-tab.active {
background-color: rgba(208, 221, 231, 0.25);
}
.t-webinars__tabs-tab:hover:not(.active) {
background-color: rgba(208, 221, 231, 0.1);
cursor: pointer;
}
.t-webinars__body .c-component--text-image .c-image {
border-radius: 16px;
overflow: hidden;
}
@media screen and (min-width: 800px) {
.t-webinars__body .l-bisection {
display: -ms-grid;
display: grid;
grid-template-columns: 1fr 90px 1fr;
align-items: center;
}
}
.c-component--cards, .c-component--cards-slider .t-webinars__main {
margin-top: 0;
}
.t-webinars__main {
margin-top: 148px;
}
.t-webinars--sub .t-webinars__main {
margin-top: 0;
}
@media screen and (max-width: 767px) {
.t-webinars__main .l-matrix {
align-items: flex-start;
}
}
.t-webinars__main .c-card__image .c-card__img {
border-radius: 16px 16px 0 0;
}
@media screen and (min-width: 768px) {
.t-webinars__main .l-matrix {
margin: -16px;
justify-content: flex-start;
}
.t-webinars__main .l-matrix__item {
margin: 16px;
flex-basis: calc((100% - 64px) / 2);
max-width: none;
}
}
@media screen and (min-width: 768px) and (min-width: 1040px) {
.t-webinars__main .l-matrix__item {
flex-basis: calc((100% - 96px) / 3);
}
}
.t-webinars__title {
margin-bottom: 64px;
font-size: 2.1875rem;
}
.t-webinars--sub .t-webinars__title {
text-align: center;
}
.t-webinars__pagination {
margin-top: 48px;
}
/* 8 - SCOPES
* Elements and classes that are scoped by a parent class
=========================================================== */
@media screen and (min-width: 550px) {
.s-buttongroup {
margin: -10px;
}
* > .s-buttongroup {
margin-top: 2rem;
}
.s-buttongroup > * {
margin: 10px;
}
}
@media screen and (max-width: 549px) {
.s-buttongroup > * + * {
margin-top: 10px;
}
}
.s-checklist {
list-style: none;
margin-left: 0;
}
.s-checklist li {
display: flex;
flex-direction: row;
vertical-align: middle;
margin-top: 5px;
line-height: 1.45;
font-size: 1rem;
}
.s-checklist li strong {
font-weight: 600;
}
.s-checklist li::before {
content: "";
flex: none;
width: 12px;
height: 12px;
margin-right: 8px;
background-image: url(/img/check/checked.svg);
background-repeat: no-repeat;
transform: translateY(7px);
}
.checklist-has-x-small-font .s-checklist {
font-size: 0.875rem;
}
.checklist-has-x-small-font .s-checklist li {
margin-top: 3px;
}
.checklist-has-x-small-font .s-checklist li::before {
transform: translateY(5px);
}
.s-definition-list dt {
font-size: 0.8125rem;
line-height: 1;
color: #333333;
text-transform: uppercase;
letter-spacing: 1px;
}
.s-definition-list dd {
margin-top: 10px;
}
.s-definition-list + .s-definition-list {
margin-top: 40px;
}
/**
* All text elements that can be added by the user through a CMS
*/
.s-text > * + * {
margin-top: 1rem;
}
.s-text > * + *.c-text-button {
margin-top: 2.5rem;
}
.s-text > h1, .s-text > h2, .s-text > h3, .s-text > h4, .s-text > h5, .s-text > h6 {
margin-bottom: 1.5rem;
color: #202121;
}
.s-text p > strong {
color: #202121;
}
.s-text > ul:not([class]) {
list-style: none;
}
.s-text > ul:not([class]) > li {
position: relative;
margin-left: -1.125em;
padding-left: 1.125em;
}
.s-text > ul:not([class]) > li::before {
content: "\2022";
position: absolute;
top: 6px;
left: 0;
font-size: 0.875em;
line-height: 18px;
color: #202121;
}
.s-text > ol:not([class]) {
list-style: none;
counter-reset: ol-counter;
}
.s-text > ol:not([class]) > li {
counter-increment: ol-counter;
position: relative;
margin-left: -1.125em;
padding-left: 1.8em;
}
.s-text > ol:not([class]) > li::before {
font-size: 0.9375rem;
font-weight: 700;
content: counter(ol-counter) ". ";
position: absolute;
top: 5px;
left: 0;
width: 1.275em;
text-align: right;
font-size: 0.75em;
line-height: 18px;
color: #202121;
}
.s-text p.is-large {
font-size: 2rem;
line-height: 1.3125;
}
.s-text p.is-semi-large {
font-size: 2rem;
line-height: 1.3125;
font-weight: 700;
}
.s-text p.is-intro {
font-size: 1.625rem;
line-height: 1.6153846154;
}
.on-dark .s-text {
color: rgba(255, 255, 255, 0.8);
}
.on-dark .s-text > h1,
.on-dark .s-text > h2,
.on-dark .s-text > h3,
.on-dark .s-text > h4,
.on-dark .s-text > h5,
.on-dark .s-text > h6 {
color: white;
}
.on-dark .s-text p > strong {
color: white;
}
.on-dark .s-text > ul:not([class]) > li::before {
color: white;
}
.on-dark .s-text > ol:not([class]) > li::before {
color: white;
}
.s-text--primary {
font-family: "Gilroy", sans-serif;
}
.s-text--large {
font-size: 1.375rem;
}
.s-text--mid {
font-size: 1.25rem;
}
.s-headings h2.c-heading__title,
.s-headings h2.c-logos__heading {
font-size: 2.72727rem;
}
@media screen and (max-width: 799px) {
.s-headings h2.c-heading__title,
.s-headings h2.c-logos__heading {
font-size: 2.25rem;
}
}
.s-headings h3:not(.c-subnav__groupname):not(.c-pricing__title) {
font-size: 2rem;
}
.s-headings .c-tabslider__content h4 {
font-size: 1.75rem;
}
/* 9 - UTILITIES
* High-specificity, very explicit selectors.
* Overrides and helper classes.
=========================================================== */
/** =====================================================================================
* Color
===================================================================================== */
/**
* Here we print out all our helper classes for our defined colors
* Based on these articles:
* - http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
* - https://blog.atechmedia.com/css-for-multiple-themes/
* Output is in the form of:
.u-color-primary {
color: #bada55;
}
.u-bg-neutral--dark {
background-color: #decaff;
}
*/
.u-color-primary--80 {
color: #FDF3EF;
}
.u-bg-primary--80 {
background-color: #FDF3EF;
}
.u-color-primary--100 {
color: #fff4e6;
}
.u-bg-primary--100 {
background-color: #fff4e6;
}
.u-color-primary--400 {
color: #ffb04f;
}
.u-bg-primary--400 {
background-color: #ffb04f;
}
.u-color-primary {
color: #FF6729;
}
.u-bg-primary {
background-color: #FF6729;
}
.u-color-secondary--20 {
color: #F2F8FF;
}
.u-bg-secondary--20 {
background-color: #F2F8FF;
}
.u-color-secondary--75 {
color: #F2F5F7;
}
.u-bg-secondary--75 {
background-color: #F2F5F7;
}
.u-color-secondary--90 {
color: #E9EBF5;
}
.u-bg-secondary--90 {
background-color: #E9EBF5;
}
.u-color-secondary--95 {
color: #EDF5FF;
}
.u-bg-secondary--95 {
background-color: #EDF5FF;
}
.u-color-secondary--100 {
color: #D0DDE7;
}
.u-bg-secondary--100 {
background-color: #D0DDE7;
}
.u-color-secondary--200 {
color: #6D93CA;
}
.u-bg-secondary--200 {
background-color: #6D93CA;
}
.u-color-secondary--300 {
color: #5F83B7;
}
.u-bg-secondary--300 {
background-color: #5F83B7;
}
.u-color-secondary--400 {
color: #6B7C93;
}
.u-bg-secondary--400 {
background-color: #6B7C93;
}
.u-color-secondary {
color: #202121;
}
.u-bg-secondary {
background-color: #202121;
}
.u-color-secondary--600 {
color: #264a80;
}
.u-bg-secondary--600 {
background-color: #264a80;
}
.u-color-secondary--800 {
color: #272a34;
}
.u-bg-secondary--800 {
background-color: #272a34;
}
.u-color-support--50 {
color: #F8F9FA;
}
.u-bg-support--50 {
background-color: #F8F9FA;
}
.u-color-support--100 {
color: #F3F6FB;
}
.u-bg-support--100 {
background-color: #F3F6FB;
}
.u-color-support--200 {
color: #E3E3E3;
}
.u-bg-support--200 {
background-color: #E3E3E3;
}
.u-color-support--400 {
color: #A2A8AE;
}
.u-bg-support--400 {
background-color: #A2A8AE;
}
.u-color-support--500 {
color: #737D87;
}
.u-bg-support--500 {
background-color: #737D87;
}
.u-color-neutral {
color: #c4c4c4;
}
.u-bg-neutral {
background-color: #c4c4c4;
}
.u-color-neutral--100 {
color: #F6F8F9;
}
.u-bg-neutral--100 {
background-color: #F6F8F9;
}
.u-color-neutral--200 {
color: #F8FAFB;
}
.u-bg-neutral--200 {
background-color: #F8FAFB;
}
.u-color-neutral--300 {
color: #EAEEF0;
}
.u-bg-neutral--300 {
background-color: #EAEEF0;
}
.u-color-neutral--400 {
color: #E6E6E6;
}
.u-bg-neutral--400 {
background-color: #E6E6E6;
}
.u-color-neutral--450 {
color: #C3C6CA;
}
.u-bg-neutral--450 {
background-color: #C3C6CA;
}
.u-color-neutral--480 {
color: #979797;
}
.u-bg-neutral--480 {
background-color: #979797;
}
.u-color-neutral--500 {
color: #9D9F9F;
}
.u-bg-neutral--500 {
background-color: #9D9F9F;
}
.u-color-neutral--700 {
color: #4c4b4b;
}
.u-bg-neutral--700 {
background-color: #4c4b4b;
}
.u-color-neutral--900 {
color: #202121;
}
.u-bg-neutral--900 {
background-color: #202121;
}
.u-color-neutral--950 {
color: #1B1B1B;
}
.u-bg-neutral--950 {
background-color: #1B1B1B;
}
.u-color-text--900 {
color: #2f3b4d;
}
.u-bg-text--900 {
background-color: #2f3b4d;
}
.u-color-text {
color: #333333;
}
.u-bg-text {
background-color: #333333;
}
.u-color-text--700 {
color: #3B3C3F;
}
.u-bg-text--700 {
background-color: #3B3C3F;
}
.u-color-text--500 {
color: #6D6F70;
}
.u-bg-text--500 {
background-color: #6D6F70;
}
.u-color-text--300 {
color: #acb4bf;
}
.u-bg-text--300 {
background-color: #acb4bf;
}
.u-color-action {
color: #328dfc;
}
.u-bg-action {
background-color: #328dfc;
}
.u-color-warning {
color: #ffd33a;
}
.u-bg-warning {
background-color: #ffd33a;
}
.u-color-warning--600 {
color: #ffc90e;
}
.u-bg-warning--600 {
background-color: #ffc90e;
}
.u-color-alert {
color: #ff8100;
}
.u-bg-alert {
background-color: #ff8100;
}
.u-color-negative {
color: #cf3e3e;
}
.u-bg-negative {
background-color: #cf3e3e;
}
.u-color-positive {
color: #3ecf8e;
}
.u-bg-positive {
background-color: #3ecf8e;
}
.u-color-light {
color: #ffffff;
}
.u-bg-light {
background-color: #ffffff;
}
.u-color-dark {
color: #000000;
}
.u-bg-dark {
background-color: #000000;
}
.u-color-star {
color: #FCBD01;
}
.u-bg-star {
background-color: #FCBD01;
}
/** =====================================================================================
* Headings
===================================================================================== */
/**
* Here we print out all our helper classes for our defined colors
* Based on these articles:
* - http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/
* - https://blog.atechmedia.com/css-for-multiple-themes/
* Output is in the form of:
.u-h1 {}
*/
.u-h2 {
font-size: 3rem;
line-height: 1.1666666667;
font-family: "Gilroy", sans-serif;
}
.u-owl > * + * {
margin-top: 1.5555555556rem;
}
.u-box-shadow {
box-shadow: 0 20px 30px -10px rgba(112, 123, 140, 0.2);
}
.u-hidden {
display: none !important;
}
.u-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
.u-overflow-x-hidden {
overflow-x: hidden;
}
.u-text-align-center {
text-align: center;
}
.u-text-align-right {
text-align: right;
}
.u-margin-top {
margin-top: 100px;
}
.u-margin-top-40 {
margin-top: 40px;
}
.u-margin-top-32 {
margin-top: 32px;
}
.u-margin-top-16 {
margin-top: 16px;
}
.u-margin-bottom {
margin-bottom: 100px;
}
.u-max-width-800 {
max-width: 800px;
}
.u-max-width-950 {
max-width: 950px;
}
.u-margin-auto {
margin-left: auto;
margin-right: auto;
}
.u-fw-bold {
font-weight: bold;
}
.u-ff-primary {
font-family: "Gilroy", sans-serif;
}
/*
* If you need to make a quick fix, you can do it here.
* Later when you have the time, you can move the fix into the correct place in the structure
*/
/* ==========================================================================
* This grid can be turned on and off when you want to check
* if everything is nice in place.
* Set flag 'showGrid' to true in site.php
* ========================================================================== */
.u-visible-grid {
z-index: 1000;
position: fixed;
width: 100%;
pointer-events: none;
}
.u-visible-grid__main {
height: 100vh;
background: repeating-linear-gradient(to right, rgba(0, 255, 255, 0.4), rgba(0, 255, 255, 0.4) 8.3333333333%, rgba(0, 255, 255, 0.25) 8.3333333333%, rgba(0, 255, 255, 0.25) 16.6666666667%);
}
/**
* Swiper 9.4.1
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2023 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: June 13, 2023
*/
@font-face {
font-family: "swiper-icons";
src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
font-weight: 400;
font-style: normal;
}
:root {
--swiper-theme-color: #007aff;
/*
--swiper-preloader-color: var(--swiper-theme-color);
--swiper-wrapper-transition-timing-function: initial;
*/
}
.swiper,
swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
display: block;
}
.swiper-vertical > .swiper-wrapper {
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
touch-action: pan-y;
}
.swiper-vertical {
touch-action: pan-x;
}
.swiper-slide,
swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
display: block;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
height: auto;
}
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
transform: translateZ(0);
backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
transform-style: preserve-3d;
}
.swiper-3d {
perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d;
}
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
scroll-snap-type: x mandatory;
}
.swiper-vertical.swiper-css-mode > .swiper-wrapper {
scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: none;
}
.swiper-centered > .swiper-wrapper::before {
content: "";
flex-shrink: 0;
order: 9999;
}
.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always;
}
.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after);
}
.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after);
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}