@charset "utf-8";

/****

HOMEPAGE USED SEPARATE STYLE SHEET

 */
/* ==========================================================================
   RESET STYLES
   ========================================================================== */
* {
	margin: 0;
	padding: 0;
}

html,
button,
select {
	color: #222;
}

img {
	border: 0 none;
}

iframe {
	border: none;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

html {
	height: 100%;
}

body {
	font-size: 1em;
	line-height: 1.4;
	font-family: Arial, Helvetica, Sans-serif;
	-webkit-font-smoothing: antialiased;
	/*smooth on macs*/
	-moz-osx-font-smoothing: grayscale;
	/*smooth on firefox*/
	width: 100%;
	height: 100%;
	color: #545454;
	/*min-width: 1080px;*/
}

a {
	color: #FF462A;
	cursor: pointer;
	text-decoration: none;
}

.col-full {
	width: 1014px;
	margin: 0 auto;
}

h1,
h2,
h3,
h4 {
	font-family: Helvetica, Arial, Sans-serif;
}

p {
	font-size: 15px;
}

/* ==========================================================================
   HEADER STYLES
   ========================================================================== */

div.h1 a span {
	display: none;
}

.register {
	text-decoration: none;
	font-weight: bold;
	color: #FFF;
	font-size: 13px;
	background: #ff5423 url(../../img3/home/register-btn.png) repeat-x;
	height: 25px;
	display: inline-block;
	width: auto;
	padding: 6px 14px 0 14px;
	border: 1px solid #f64000;
	border-bottom: 0 none;
	border-right: 0 none;
	border-radius: 4px;
}

ul.step-by-step,
ol.step-by-step {
	font-size: 14px;
	color: #242424;
}

ul.step-by-step.guide,
ol.step-by-step.guide {
	font-size: 15px;
}

ul.step-by-step li,
ol.step-by-step li {
	padding: 0 12px 12px 0;
	margin-left: 20px;
}

.homepage-step-by-step-how-to-create-tests {
	display: none;
}

.quiz-maker h1 {
	font-size: 37px;
	color: #242424;
	padding-top: 38px;
	margin-bottom: 5px;
	text-shadow: none;
}

.quiz-maker h3 {
	font-size: 24px;
	color: #242424;
	padding-top: 20px;
	margin-bottom: 30px;
	text-shadow: none;
}

.quiz-maker p {
	color: #242424;
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 25px;
}

p a {
	color: #FF462A;
}

/* ==========================================================================
   MAIN STYLES
   ========================================================================== */
#features {
	background: #ff5423;
	overflow: hidden;
	clear: both;
}

#features h2 {
	line-height: 1.15;
	color: #FFF;
	font-family: Helvetica;
	padding-top: 24px;
	margin-bottom: 13px;
	font-size: 25px;
}

#statistics {
	background: url(../../img3/home/dark-gd.png) repeat;
	overflow: hidden;
	margin-top: 1px;
	padding-bottom: 55px;
}

/* ~~~~~~~~~~ Price plan Table styles~~~~~~~~~~~~~*/

/*----- End Price Plan Table Styles ------*/



.bold {
	font-weight: bold;
}

/*----- Reg Form Styles -----*/

/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */
h4 a span {
	display: none;
}

/* TW below */

/* New site V3 Styles */


/*********************************************************************************************************************/

.alert-box a.closeV3 {
	display: block;
	float: right;
	height: 16px;
	width: 16px;
}

.alert-box a.closeV3:hover {
	text-decoration: none;
}

.alert-box a.closeV3 span {
	display: block;
	padding: 0 4px;
	color: #FFD551;
	font-weight: 500;
	font-size: 16px;
}

.alert-box-right-close {
	right: 28px;
	margin-left: 16px
}


.alert-box {
	box-shadow: 0 1px 3px rgba(0,0,0,.1);
	padding: 15px 9px 15px 45px;
	margin: 20px 0;
	line-height: 20px;
	clear:both;
	border-left: 3px solid #FFD551;
	background: var(--yellow-warning-light, #FFFBED) url("/img4/icons/alert-normal.svg") no-repeat 13px 15px;
}


.alert-box.information {
	border-left: 3px solid #0896E6;
	background: #F4F9FD url("/img4/icons/alert-information.svg") no-repeat 13px 15px;
}


.alert-box.error {
	border-left: 3px solid #D62F7F;
	background: var(--red-magenta-fail-magenta-01, #FFF2F2) url("/img4/icons/alert-error.svg") no-repeat 13px 15px;
}



.alert-box.alert-white {
	border: 1px solid var(--grey-grey-40, #DCE1E5);
	background: #FFF;
	content: none;
}

.alert-box.alert-confirmation {
	border-left: 3px solid #3CB27A;
	background: #E5FFF2 url("/img4/icons/alert-confirmation.svg") no-repeat 13px 15px;
}

.alert-box.alert-confirmation a.closeV3 span {
	color: #67BE60;
}

.alert-box.error a.closeV3 span {
	color: #D62F7F;
}

.alert-box.information a.closeV3 span {
	color: #0896E6;
}

.alert-box.alert-white a.closeV3 span {
	color: #AEAEAE;
}

.alert-announcement {
	position: relative;
	margin: 5px 0 16px 0;
	border-left: 3px solid #0896E6;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	line-height: 32px;

}


/*
.alert-box {
	background: none repeat scroll 0 0 #FFFFEB;
	border-left: 3px solid #FFC700;
	margin: 5px 0 16px 0;
	padding: 16px;
	clear:both;
	color: #333333;
}

.alert-box.error {
	background: none repeat scroll 0 0 #fff6f4;
	border-left: 3px solid #b5514f;
	color: #b5514f;
}
.alert-box.alert-default {
	background: none repeat scroll 0 0 #E6E6E6;
	border-left: 3px solid #9b9b9b;
}
.alert-box.alert-white {
	background: none repeat scroll 0 0 #ffffff;
	border-left: 3px solid #9b9b9b;
}
.alert-box.alert-confirmation {
	background: none repeat scroll 0 0 #EBF6EA;
	border-left: 3px solid #4e824e;
	color: #4e824e;
}
.alert-box.alert-center{
	width:90%;
	margin-left:3%;
} */

.right {
	display: block;
	float: right !important;
}

/*
#contact-promo-1{
	background: url(../../img3/home/contact_usermanual_1.jpg) bottom right no-repeat;
}*/

.hide {
	display: none;
}

/* Grid Complement */

/* Manual */

/* crumbtrail list */

/* end manual */

/* Faq */

/*
 #links li a {   make hover effect work in IE
	width: 200px; background: #DADADA;
}
*/

/* end Faq */

/* Start JQM window  NOTE: Same as in standard admin cm.css */
.close span {
	display: none;
}

a.close {
	display: block;
	float: right;
	height: 16px;
	width: 16px;
	background: url(../../img/close.gif) top right no-repeat;
}

a:hover.close {
	background: url(../../img/close_hover.gif) top right no-repeat;
}

/* Fixed positioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */

/* End JQM window */
/* Start Tipsy NOTE: Same as in standard admin cm.css */

/*padding: 5px 8px 4px 8px*/

/* Rounded corners */

/* Shadow */

/* Rules to colour arrows */

/* End tipsy */

/* Results layover */

/* End results Layover*/
/* Start Generic overlay */

/* End Generic overlay */
/** END MAT CSS **/

/* start Btns */

/*
.btn.dropdown-toggle .caret {
    background-position: 0 -2978px;
    padding: 0 4px;
}
*/

/* end Btns */


/* Start manual API */

/*width:914px;*/

ul.manual {
	color: #3c3c3c;
	clear: both;
	margin: 10px 0 0 18px;
	padding: 0;
	list-style-type: disc;
	font-size: 13px;
	max-width: 800px
}

ol.manual {
	color: #3c3c3c;
	clear: both;
	margin: 10px 0 5px 23px;
	padding: 0;
	font-size: 13px;
	max-width: 800px
}

ul.manual li,
ol.manual li {
	margin: 0;
	padding: 0 0 5px 0;
}

/*END manual API */


/* START CSS for test settings demo page */

/* END CSS for test settings demo page */

/* START : Pricing */

/* end Pricing */

/* START : Pricing section selection */

/* TODO : Change to list? */

/* END : Pricing section selection */




/*=========== RESPONSIVE STYLES ===========*/

#client-list {
	border-bottom: 3px solid #c6c6c6;
	padding: 18px 0 17px;
}

#client-list .col-full {
	width: 1020px;
}

#client-list img {
	margin-left: 90px;
	margin-top: -44px;
}

#client-list {
	overflow: hidden;
}

/*#client-list .client-list img:last-child {padding-right: 0;}*/



@media screen and (max-width: 1050px) {
	body .col-full {
		width: 99%;
		padding: 0 10px 0 10px;
	}
}

@media screen and (max-width: 1035px) {

	#client-list .col-full {
		text-align: center;
		width: inherit;
	}

}

@media screen and (max-width: 927px) {

	.quiz-maker h2 {
		line-height: 1.2;
		margin-bottom: 15px;
	}
}

@media screen and (max-width: 917px) {

	
	h1 {
		margin-left: 10px;
	}

	
	.quiz-maker h2,
	.quiz-maker h3,
	.quiz-maker p,
	.quiz-maker img {
		margin-left: 10px;
	}

	
	ul.manual li {
		margin-left: 10px;
	}

}

@media screen and (max-width: 724px) {

	h1 {
		clear: both;
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 470px) {
	.quiz-maker h2 {
		font-size: 30px;
	}
}

@keyframes shake {

	20%,
	40%,
	60%,
	80% {
		-webkit-transform: rotatey(-.5deg);
		/* Chrome, Safari, Opera */
		-webkit-transform-style: preserve-3d;
		/* Chrome, Safari, Opera */
		-ms-transform: rotateZ(-.5deg);
		-moz-transform: rotateZ(-.5deg);
	}

	0%,
	15%,
	25%,
	35%,
	45%,
	55%,
	65%,
	75%,
	85%,
	95%,
	100% {
		-webkit-transform: rotateZ(0deg);
		/* Chrome, Safari, Opera */
		-webkit-transform-style: preserve-3d;
		/* Chrome, Safari, Opera */
		-ms-transform: rotateZ(0deg);
		-moz-transform: rotateZ(0deg);
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		-webkit-transform: rotateZ(.5deg);
		/* Chrome, Safari, Opera */
		-webkit-transform-style: preserve-3d;
		/* Chrome, Safari, Opera */
		-ms-transform: rotateZ(.5deg);
		-moz-transform: rotateZ(.5deg);
	}
}



/* Retina images homepage BG image */

/* Keep under #featured  retina image css */


/* Retina */

@charset "UTF-8";
/**
Home.scss is alias of style.css
Laravel Mix only support unique input files to generate ouput files.
So, home.scss file is required to create an independent home.css file.
 */
/* ==========================================================================
   Fix file path for lecagy css
   ========================================================================== */

#statistics {
  background: url("/img3/home/dark-gd.png") repeat;
}

a.close {
  background: url("/img/close.gif") top right no-repeat;
}

a:hover.close {
  background: url("/img/close_hover.gif") top right no-repeat;
}
h1 {
  margin: 0;
}

@font-face {
  font-family: "Helvetica";
  src: url("/css3/fonts/Helvetica/Helvetica-Bold.eot");
  src: url("/css3/fonts/Helvetica/Helvetica-Bold.eot?#iefix") format("embedded-opentype"), url("/css3/fonts/Helvetica/Helvetica-Bold.woff2") format("woff2"), url("/css3/fonts/Helvetica/Helvetica-Bold.woff") format("woff"), url("/css3/fonts/Helvetica/Helvetica-Bold.ttf") format("truetype"), url("/css3/fonts/Helvetica/Helvetica-Bold.svg#Helvetica-Bold") format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("/css3/fonts/Helvetica/Helvetica.eot");
  src: url("/css3/fonts/Helvetica/Helvetica.eot?#iefix") format("embedded-opentype"), url("/css3/fonts/Helvetica/Helvetica.woff2") format("woff2"), url("/css3/fonts/Helvetica/Helvetica.woff") format("woff"), url("/css3/fonts/Helvetica/Helvetica.ttf") format("truetype"), url("/css3/fonts/Helvetica/Helvetica.svg#Helvetica") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/css3/fonts/Helvetica/Helvetica.eot");
  src: url("/css3/fonts/Helvetica/Helvetica.eot?#iefix") format("embedded-opentype"), url("/css3/fonts/Helvetica/Helvetica.woff2") format("woff2"), url("/css3/fonts/Helvetica/Helvetica.woff") format("woff"), url("/css3/fonts/Helvetica/Helvetica.ttf") format("truetype"), url("/css3/fonts/Helvetica/Helvetica.svg#Helvetica") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/**
 *  Global color variables.
 *	The underscore 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
   ========================================================================== */
/** =====================================================================================
 *  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
 */
/** =====================================================================================
 *  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
 */
/**
 *  Global color variables.
 *	The underscore 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
   ========================================================================== */
/* Media query mixin for writing Mobile First
 * ========================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  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
 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/* ==========================================================================
 * 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, 500);
    }

    .myClass {
      @include font(medium, $weight: 300);
    }

 */
/* ==========================================================================
   Config settings
   ========================================================================== */
/** =====================================================================================
 *  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
 */
/**
 *  Global color variables.
 *	The underscore 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.
 */
/* Media query mixin for writing Mobile First
 * ========================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  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
 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/* ==========================================================================
 * 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, 500);
    }

    .myClass {
      @include font(medium, $weight: 300);
    }

 */
/* ==========================================================================
 * 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";*/
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  font-size: calc(14 / 16 * 1rem);
  line-height: calc(25 / 14);
  font-family: "Helvetica", sans-serif;
  font-weight: 400;
  color: #2E3133;
}

body .container {
  max-width: 1024px;
  padding: 0 35px;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  body .container {
    padding: 0 48px;
  }
}
body .container--wide {
  max-width: 1120px;
}

/**
 * [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;
  margin: 0;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

/**
 * [1] Turn off text-shadow when selecting text for better readability
 */
/* Remove default margin around figure
 */

/**
 * [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 {
  display: block;
  vertical-align: middle; /*[1]*/
  border: none; /*[2]*/
  max-width: 100%;
  height: auto;
}

a {
  color: #ff462a;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-decoration: none;
}

h1, h2, h3, h4,
ul, ol {
  margin-top: 0;
  margin-bottom: 0;
}

p {
  font-family: "Helvetica", sans-serif;
  margin: 0;
}

p + p {
  margin-top: 16px;
}

p + ol, p + ul {
  margin-top: 16px;
}

/** =====================================================================================
 *  Lists
 ===================================================================================== */
/**
 *	Default indentation value for lists
 */
ul,
ol {
  padding: 0;
  margin: 0;
  margin-left: 0;
}

/**
 *	Remove extra vertical spacing when nesting lists.
 */
li {
  list-style-type: none;
}

li > ul,
li > ol {
  margin-bottom: 0;
}

/**
*	list-items needs resetting for our Lobotomized Owl selector
*/
li + li {
  margin-top: 0;
}

.icon {
  width: 16px;
  height: 16px;
  background-size: 16px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-item-align: start;
      align-self: start;
  background-repeat: no-repeat;
}

.icon.app-window-multiple.bold {
  background-image: url("/img4/icons/streamline3/App-Window-Multiple.svg");
}

.icon.cursor-select.bold {
  background-image: url("/img4/icons/streamline3/Cursor-Select-3.svg");
}

.icon.neutral-id-card.bold {
  background-image: url("/img4/icons/streamline3/id-card.svg");
}

.icon.webcam.bold {
  background-image: url("/img4/icons/streamline3/Webcam-1.svg");
}

.icon.face-detection.bold {
  background-image: url("/img4/icons/streamline3/face-id-5.svg");
}

/* ==========================================================================
   Config settings
   ========================================================================== */
/** =====================================================================================
 *  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
 */
/**
 *  Global color variables.
 *	The underscore 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.
 */
/* Media query mixin for writing Mobile First
 * ========================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  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
 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/* ==========================================================================
 * 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, 500);
    }

    .myClass {
      @include font(medium, $weight: 300);
    }

 */
.c-card {
  margin-bottom: 22px;
}

@media screen and (min-width: 768px) {
  .c-card {
    padding: 34px;
    padding-bottom: 60px;
    margin-bottom: 0;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
  }
}
.c-card:last-of-type {
  margin-bottom: 0;
}

.c-card__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
  gap: 23px;
}

@media screen and (min-width: 768px) {
  .c-card__header {
    margin-bottom: 28px;
  }
}
.c-card__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 42px;
  height: 42px;
  background-color: #F3644C;
  border-radius: 100%;
}

.c-card__title {
  font-size: calc(20 / 16 * 1rem);
  line-height: calc(28 / 20);
  font-weight: 700;
  color: #454F59;
}

@media screen and (min-width: 768px) {
  .c-card__title {
    font-size: calc(20 / 16 * 1rem);
    line-height: calc(22 / 20);
    font-weight: 700;
  }
}
.c-card__description p {
  font-size: calc(14 / 16 * 1rem);
  line-height: calc(25 / 14);
  font-weight: 400;
  color: #454F59;
}

.c-card__description a {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  color: #FF462A;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.c-card__description a:hover {
  text-decoration: underline;
}

.c-card__description ul li {
  list-style-type: disc;
  margin: 5px 0 10px 20px;
  font-size: calc(14 / 16 * 1rem);
  line-height: calc(25 / 14);
  font-weight: 400;
  color: #454F59;
}

.c-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: center;
  width: 100%;
  border: none;
  display: inline-block;
  padding: 5px 20px;
  border-radius: 6px;
  font-size: calc(15 / 16 * 1rem);
  line-height: calc(25 / 15);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}

@media screen and (min-width: 768px) {
  .c-btn {
    padding: 9px 20px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}
.c-btn--icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}

.c-btn__icon {
  width: 13px;
  height: 13px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.c-btn--orange {
  background-color: #FF462A;
}

.c-btn--orange:hover {
  background-color: #FDA295;
}

.c-btn--grey {
  background-color: #454F59;
}

.c-btn--grey:hover {
  background-color: #8F959B;
}

.c-btn__link {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  padding-right: 23px;
  font-size: calc(14 / 16 * 1rem);
  line-height: calc(23 / 14);
  font-weight: 700;
  color: #FF462A;
}

.c-btn__link::after {
  position: absolute;
  content: "";
  top: 6px;
  right: 0;
  width: 18px;
  height: 10px;
  background-image: url("/img3/marketing/icons/arrow-link.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.c-btn__link:hover::after {
  -webkit-transform: translateX(3px);
      -ms-transform: translateX(3px);
          transform: translateX(3px);
}

a.video-btn {
  width: 123px;
  height: 85px;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: #353535;
  padding-top: 72px;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 10px;
  font-weight: 400;
  font-family: Inter;
  margin-right: 13px;
}

@media screen and (max-width: 767px) {
  a.video-btn {
    margin: auto !important;
  }
}
a.video-btn:last-of-type {
  margin-right: 0px;
}

a.video-btn.active {
  background: initial;
  color: inherit;
}

a.video-btn.active:before {
  border: 1px solid #000;
}

a.video-btn:before {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 123px;
  height: 68px;
  display: block;
  content: "";
}

a.video-btn.create-exam:before {
  background: url("/img3/marketing/custom-buttons/button-how-to-create-exams.svg") no-repeat;
}

a.video-btn.give-tests:before {
  position: absolute;
  background: url("/img3/marketing/custom-buttons/button-how-to-give-tests.svg") no-repeat;
}

a.video-btn.get-results:before {
  position: absolute;
  background: url("/img3/marketing/custom-buttons/button-get-results.svg") no-repeat;
}

.c-menu__logo {
  display: inline-block;
  height: 18px;
  width: auto;
  margin-right: 16px;
}

@media screen and (min-width: 768px) {
  .c-menu__logo {
    height: 25px;
    margin-top: -9px;
  }
}
.c-menu__logo span {
  display: none;
}

.c-menu__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 66px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
  .c-menu__top {
    height: 92px;
    padding: 24px 0 17px;
  }
}
.c-menu__alert {
  margin: 0px 0px 20px 0px;
  width: 100%;
}

.c-menu__top-logged-in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-ordinal-group: 11;
      -ms-flex-order: 10;
          order: 10;
  width: 100%;
}

.c-menu__top-logged-in .c-btn {
  font-size: calc(12 / 16 * 1rem);
  line-height: calc(22 / 12);
  font-weight: 700;
  padding: 5px 20px 4px;
  min-width: 98px;
  letter-spacing: 0.02em;
}

.c-menu__top-logged-in .c-form__control:not(.c-menu__top-login .c-form__control) + .c-form__control:not(.c-menu__top-login .c-form__control) {
  margin: 0;
}

@media screen and (min-width: 520px) {
  .c-menu__top-logged-in {
    -webkit-box-ordinal-group: inherit;
        -ms-flex-order: inherit;
            order: inherit;
    width: auto;
  }
}
.c-menu__top-login {
  display: none;
}

@media screen and (min-width: 768px) {
  .c-menu__top-login {
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
  }
  .c-menu__top-login .c-btn {
    font-size: calc(12 / 16 * 1rem);
    line-height: calc(22 / 12);
    font-weight: 700;
    padding: 5px 20px 4px;
    min-width: 98px;
    letter-spacing: 0.02em;
  }
}
.c-menu__top-login .c-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}

.c-menu__top-login .c-form__input {
  border-radius: 4px;
  padding: 6px 7px 6px 10px;
}

.c-menu__top-login .c-form__checkbox {
  margin-top: 6px;
  font-size: calc(12 / 16 * 1rem);
  line-height: calc(14 / 12);
  font-weight: 400;
  padding-left: 19px;
}

.c-menu__top-login .c-form__checkbox::after {
  width: 13px;
  height: 13px;
  top: -1px;
}

.c-menu__top-link {
  display: inline-block;
  font-size: calc(15 / 16 * 1rem);
  line-height: calc(18 / 15);
  font-weight: 400;
  margin-left: auto;
  color: #454F59;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media screen and (min-width: 768px) {
  .c-menu__top-link {
    display: none;
  }
}
.c-menu__top-link:hover {
  color: #424242;
}

.c-menu__toggle {
  position: relative;
  width: 20px;
  height: 14px;
  border: none;
  outline: none;
  background-color: transparent;
  margin-left: 26px;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .c-menu__toggle {
    display: none;
  }
}
.c-menu__toggle span {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #8F959B;
  border-radius: 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  left: 0;
}

.c-menu__toggle span:first-child {
  top: 0;
}

.c-menu__toggle span:nth-child(2) {
  top: 6px;
}

.c-menu__toggle span:last-child {
  bottom: 0;
}

.mobile-nav-only {
  /* Hide from desktop view, only shows in mobile nav */
  display: none;
}

@media screen and (max-width: 767px) {
  .c-menu__mein-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    overflow: scroll;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateX(-16px);
        -ms-transform: translateX(-16px);
            transform: translateX(-16px);
    background-color: #ffffff;
    width: 100vw;
    height: calc(100vh - 66px);
    border-top: 1px solid rgba(143, 149, 155, 0.5);
  }
  .c-menu__mein-wrap .container {
    padding: 0;
  }
  .c-menu__mein-wrap.open {
    opacity: 1;
    pointer-events: all;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
}
@media screen and (min-width: 768px) {
  .c-menu__mein-wrap {
    padding: 6px 0;
    background-color: #2E3133;
  }
}
@media screen and (min-width: 768px) {
  .c-menu__mein-nav {
    margin: 0 -14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
  }
}
.c-menu__mein-item--subnav {
  position: relative;
}

.c-menu__mein-item--subnav:hover .c-menu__mein-link::after {
  border-color: #2E3133;
}

.c-menu__mein-link, .mc-menu__mein-link {
  display: block;
  font-size: calc(14 / 16 * 1rem);
  line-height: calc(36 / 14);
  font-weight: 400;
  color: #ffffff;
  background-color: #2E3133;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  padding: 8px 28px 10px 14px;
  border-radius: 4px;
}

@media screen and (min-width: 768px) {
  .c-menu__mein-link, .mc-menu__mein-link {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-size: calc(16 / 16 * 1rem);
    line-height: calc(18 / 16);
    font-weight: 400;
    color: #F8F8F9;
  }
  .c-menu__mein-link:hover::after, .mc-menu__mein-link:hover::after {
    border-color: #2E3133;
  }
  .c-menu__mein-link:hover, .mc-menu__mein-link:hover {
    color: #2E3133;
    background-color: #FAFAFA;
  }
}
@media screen and (max-width: 767px) {
  .c-menu__mein-link, .mc-menu__mein-link {
    border-radius: 0px;
    color: #454F59;
    font-size: calc(14 / 16 * 1rem);
    line-height: calc(16 / 14);
    font-weight: 700;
    background-color: #FAFAFA;
    border-bottom: 1px solid #E4E4E4;
    height: 53px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-right: 40px;
    font-weight: 700;
  }
}
.c-menu__mein-link {
  padding-right: 14px;
}

.mc-menu__mein-link::after {
  content: "";
  width: 9px;
  height: 5px;
  background: url("/img4/icons/arrow-down-white-small.svg") no-repeat;
  position: absolute;
  right: 8px;
  top: 15px;
}

.mc-menu__mein-link:hover::after {
  background: url("/img4/icons/arrow-down-black-small.svg") no-repeat;
}

.c-menu__mein-btn {
  margin: 25px 0 25px 14px;
  width: 136px;
}

.c-menu__mein-link-current {
  color: #2E3133;
  background: white;
  border-radius: 4px;
}

.c-menu__mein-link-current::after {
  background: url("/img4/icons/arrow-down-black-small.svg") no-repeat;
}

.hide {
  display: none;
}

@media screen and (max-width: 767px) {
  .c-menu__subnav-wrap {
    height: auto;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
  }
  .c-menu__subnav-wrap.open {
    max-height: 999px;
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }
}
@media screen and (min-width: 768px) {
  .c-menu__subnav-wrap {
    position: absolute;
    padding-top: 16px;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
            transform: translateY(-10px);
    top: 100%;
    left: 0;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }
  .c-menu__mein-item--subnav:hover .c-menu__subnav-wrap {
    opacity: 1;
    pointer-events: all;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }
}
.menu__subnav {
  padding: 10px 16px;
}

@media screen and (min-width: 768px) {
  .menu__subnav {
    min-width: 240px;
    padding: 12px 12px 14px 12px;
    background-color: #ffffff;
    position: relative;
    border-radius: 4px;
    -webkit-box-shadow: 0px 30px 27px 0px rgba(0, 0, 0, 0.31);
            box-shadow: 0px 30px 27px 0px rgba(0, 0, 0, 0.31);
  }
  .menu__subnav::after {
    content: "";
    background-color: #ffffff;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    position: absolute;
    top: -5px;
    left: 24px;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}
.c-menu__subnav-item {
  margin-bottom: 4px;
}

.c-menu__subnav-item:last-child {
  margin-bottom: 0;
}

.c-menu__subnav-link {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #454F59;
  font-size: calc(14 / 16 * 1rem);
  line-height: calc(16 / 14);
  font-weight: 400;
  padding: 2px 12px;
  border-radius: 8px;
  background-color: white;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  height: 40px;
}

.c-menu__subnav-link:active {
  color: #FB3311;
}

@media screen and (min-width: 768px) {
  .c-menu__subnav-link {
    padding: 10px 13px;
  }
}
.c-menu__subnav-link:hover {
  background-color: rgba(251, 51, 17, 0.1);
  color: #FB3311;
}

.c-menu__subnav-link:hover .c-menu__subnav-icon {
  color: inherit;
}

.c-menu__subnav-icon {
  width: 16px;
  height: 16px;
  margin-right: 12px;
  color: inherit;
}

.c-menu__subnav-icon svg {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media screen and (min-width: 768px) {
  .c-menu__subnav-icon {
    width: 20px;
    height: 20px;
    margin-right: 13px;
  }
}
@media screen and (max-width: 767px) {
  .c-menu__subnav-item--dropdown {
    position: relative;
  }
  .c-menu__subnav-item--dropdown::after {
    content: "";
    width: 9px;
    height: 9px;
    position: absolute;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    top: 13px;
    right: 16px;
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-color: #2E3133;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}
.c-menu__subnav-dropdown {
  height: auto;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  padding-left: 15px;
}

.c-menu__subnav-dropdown.open {
  max-height: 999px;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
}

@media screen and (min-width: 768px) {
  .c-menu__subnav-dropdown {
    display: none;
  }
}
/**
 Mobile Speicific components
 */
@media screen and (max-width: 767px) {
  .c-menu__mein-link-current {
    color: #fb3311;
    background: #fafafa;
    border-radius: 0px;
  }
  .mobile-nav-only {
    display: block;
  }
  .mc-menu__mein-link:hover {
    color: #2E3133;
    background-color: #F8F8F9;
  }
  .mc-menu__mein-link::after, .mc-menu__mein-link:hover::after {
    right: 28px;
    width: 20px;
    height: 20px;
    content: "";
    background: url("/img4/icons/arrow-down-grey.svg") no-repeat;
  }
  .mc-menu__mein-link.c-menu__mein-link-current {
    color: #2E3133;
    background-color: #F8F8F9;
  }
  .c-menu__mein-item.js-submenu-wrap > .c-menu__subnav-link {
    border-bottom: none;
  }
  .c-menu__mein-item.js-submenu-wrap > .c-menu__subnav-link::after {
    width: 20px;
    height: 20px;
    content: "";
    background: url("/img4/icons/arrow-down-grey.svg") no-repeat;
    position: absolute;
    right: 12px;
  }
  .c-menu__mein-item.js-submenu-wrap > .c-menu__subnav-link:hover {
    color: #fb3311 !important;
    background-color: rgba(251, 51, 17, 0.1) !important;
  }
  .mc-sm-subSidebar__item {
    margin-bottom: 2px;
    margin-top: 2px;
    padding-left: 28px;
    padding-right: 13px;
  }
  .mc-sm-subSidebar__item:last-child {
    margin-bottom: 0;
  }
  .level-2-mobile-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2px 12px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
    font-family: Helvetica;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    height: 40px;
  }
  .level-2-mobile-link.current, .level-2-mobile-link.current:hover {
    color: #FB3311;
    font-weight: 700;
    border-radius: 8px;
    background: rgba(251, 51, 17, 0.1);
  }
  .level-2-mobile-link:hover {
    color: #FB3311;
    font-weight: 400;
    border-radius: 8px;
    background: rgba(251, 51, 17, 0.1);
  }
}
.c-form__input {
  display: inline-block;
  font-size: calc(13 / 16 * 1rem);
  line-height: calc(18 / 13);
  font-weight: 400;
  padding: 4px 7px 4px 10px;
  background-color: #ffffff;
  border: 1px solid #D9D9D9;
  color: #454F59;
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.c-form__checkbox {
  display: block;
  position: relative;
  padding-left: 24px;
  font-size: calc(13 / 16 * 1rem);
  line-height: calc(25 / 13);
  font-weight: 400;
  color: #424242;
}

.c-form__checkbox::after {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  left: 0;
  top: 3px;
  content: "";
  background-position: center;
  background-image: url("/img3/marketing/icons/check.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 17px;
  height: 17px;
  border-radius: 2px;
  background-color: #ffffff;
  border: 1px solid #DEDEDE;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.c-form__checkbox:has(input:checked)::after {
  background-color: #4189CC;
  border-color: #4189CC;
}

.c-form__link {
  display: block;
  font-size: calc(12 / 16 * 1rem);
  line-height: calc(14 / 12);
  font-weight: 400;
  color: #FF462A;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  margin-top: 6px;
}

.c-form__link:hover {
  color: #FDA295;
}

.c-form__control:not(.c-menu__top-login .c-form__control) + .c-form__control:not(.c-menu__top-login .c-form__control) {
  margin-top: 20px;
}

.c-form__control:not(.c-menu__top-login .c-form__control) .c-form__input {
  width: 100%;
  font-size: calc(14 / 16 * 1rem);
  line-height: calc(34 / 14);
  font-weight: 400;
  padding: 3px 20px;
  border-radius: 4px;
}

.c-form__control:not(.c-menu__top-login .c-form__control) .c-text {
  margin-bottom: 15px;
}

.c-title__main {
  font-size: calc(30 / 16 * 1rem);
  line-height: calc(36 / 30);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #2E3133;
}

.c-title__section {
  font-size: calc(23 / 16 * 1rem);
  line-height: calc(30 / 23);
  font-weight: 700;
  color: #2E3133;
}

@media screen and (min-width: 768px) {
  .c-title__section {
    font-size: calc(23 / 16 * 1rem);
    line-height: calc(28 / 23);
    font-weight: 700;
  }
}
.c-text {
  font-size: calc(15 / 16 * 1rem);
  line-height: calc(26 / 15);
  font-weight: 400;
  color: #454F59;
}

@media screen and (min-width: 768px) {
  .c-text {
    font-size: calc(14 / 16 * 1rem);
    line-height: calc(26 / 14);
    font-weight: 400;
  }
}
.c-text a {
  color: #FB3311;
}

.c-popup__wrap {
  opacity: 0;
  pointer-events: none;
  padding: 25px 8px;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 30;
  background-color: rgba(46, 49, 51, 0.5);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.c-popup__wrap.open {
  opacity: 1;
  pointer-events: all;
}

.c-popup {
  padding: 25px 20px 28px 28px;
  background-color: #ffffff;
  border-radius: 8px;
  opacity: 0;
  -webkit-transform: translateY(15px);
      -ms-transform: translateY(15px);
          transform: translateY(15px);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  max-width: 700px;
  margin: auto;
}

.open .c-popup {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.c-popup .c-form__control {
  margin-bottom: 10px;
}

.c-popup .c-form__control:last-of-type {
  margin-bottom: 0;
}

.c-popup .c-form__control:has(.c-btn) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.c-popup .c-btn {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c-popup .c-form {
  margin-bottom: 12px;
}

.c-popup .c-form__input {
  width: 100%;
  font-size: calc(15 / 16 * 1rem);
  line-height: calc(23 / 15);
  font-weight: 400;
  padding: 5px 13px;
}

.c-popup .c-form__link {
  display: inline;
}

.c-popup__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.c-popup__header .c-title__main {
  color: #2E3133;
  font-size: 14px;
  font-weight: 600;
  font-family: Inter;
}

.c-popup__close {
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: absolute;
  right: 25px;
  top: 24px;
}

.c-popup__content {
  margin-bottom: 10px;
}

.c-list-icons {
  list-style: none;
}

@media screen and (max-width: 767px) {
  .c-list-icons + .c-list-icons {
    margin-top: 14px;
  }
}
.c-list-icons__item {
  padding-left: 43px;
  font-size: calc(14 / 16 * 1rem);
  line-height: calc(22 / 14);
  font-weight: 400;
  color: #454F59;
  position: relative;
}

.c-list-icons__item + .c-list-icons__item {
  margin-top: 14px;
}

@media screen and (min-width: 768px) {
  .c-list-icons__item {
    padding-left: 37px;
  }
}
@media screen and (min-width: 992px) {
  .c-list-icons__item {
    white-space: nowrap;
  }
}
.c-list-icons__icon {
  position: absolute;
  left: 0;
  top: 0;
}

.c-list__item {
  position: relative;
  padding-left: 35px;
  font-size: calc(15 / 16 * 1rem);
  line-height: calc(25 / 15);
  font-weight: 400;
  color: #454F59;
}

.c-list__item + .c-list__item {
  margin-top: 22px;
}

.c-list__item::after {
  position: absolute;
  content: "";
  top: 3px;
  left: 0;
  width: 20px;
  height: 20px;
  background-image: url("/img3/marketing/icons/list-check.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.c-list--none .c-list__item::after {
  position: initial;
  content: "";
  top: 0px;
  left: 0;
  width: 0px;
  height: 0px;
  background-image: none;
  background-repeat: no-repeat;
  background-size: contain;
}
.c-tab__content-item {
  opacity: 0;
  position: absolute;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}

.c-tab__content-item.active {
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
  opacity: 1;
  position: static;
}

.c-tab__content-item.active.notransition {
  -webkit-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}

.c-tab__content-item.notransition {
  -webkit-transition: none;
  transition: none;
}

.c-tab__content-item .c-title__section {
  margin-bottom: 12px;
}
@media print {
  .noprint, .noprint * {
    display: none !important;
  }
}
/* ==========================================================================
   Config settings
   ========================================================================== */
/** =====================================================================================
 *  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
 */
/**
 *  Global color variables.
 *	The underscore 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.
 */
/* Media query mixin for writing Mobile First
 * ========================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  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
 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
/* ==========================================================================
 * 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, 500);
    }

    .myClass {
      @include font(medium, $weight: 300);
    }

 */
.s-features {
  padding: 48px 0;
}

.s-features .c-title__section {
  margin-bottom: 25px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .s-features .c-title__section {
    margin-bottom: 10px;
  }
}
.s-features .c-btn__link {
  margin: 0 auto;
}

.s-features .u-col__single {
  max-width: 744px;
}

.s-features__subtitle {
  font-size: calc(16 / 16 * 1rem);
  line-height: calc(24 / 16);
  font-weight: 400;
  color: #454F59;
  text-align: center;
  margin-bottom: 32px;
}

@media screen and (min-width: 768px) {
  .s-features__subtitle {
    font-size: calc(18 / 16 * 1rem);
    line-height: calc(21 / 18);
    font-weight: 400;
    margin-bottom: 60px;
  }
}
.s-features__content {
  margin-bottom: 34px;
}

@media screen and (min-width: 768px) {
  .s-features__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -10px 50px;
  }
  .s-features__content > * {
    width: 50%;
    padding: 0 10px;
  }
}
.s-hero {
  position: relative;
  padding: 20px 0;
  background: url("/img3/marketing/hero-bgrd.png") #B8B8B8 no-repeat;
  background-position: -430px center;
  background-size: auto 100%;
  mix-blend-mode: multiply;
}

@media screen and (min-width: 414px) {
  .s-hero {
    padding: 20px 0;
  }
}
@media screen and (min-width: 768px) {
  .s-hero {
    background-position: -430px center;
    padding: 20px 0;
  }
}
@media screen and (min-width: 992px) {
  .s-hero {
    background-position: center;
    padding: 0 0 10px;
  }
}
@media screen and (min-width: 1200px) {
  .s-hero {
    background-position: center;
    padding: 0;
  }
}
.s-hero .c-text {
  color: #ffffff;
  margin-top: 16px;
}

@media screen and (min-width: 768px) {
  .s-hero .c-text {
    margin-top: 24px;
  }
}
.s-hero .c-btn {
  margin-top: 38px;
  -webkit-box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
}

.s-hero .c-title__main {
  color: #ffffff;
}

@media screen and (min-width: 992px) {
  .s-hero .c-title__main {
    margin: 8vh 0 0 0;
  }
}
.s-hero__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (min-width: 992px) {
  .s-hero__content {
    gap: 13px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    max-height: 434px;
    -webkit-box-align: initial;
        -ms-flex-align: initial;
            align-items: initial;
  }
}
.s-hero__info {
  max-width: 611px;
}

@media screen and (min-width: 992px) {
  .s-hero__info {
    max-width: 410px;
    margin: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  .s-hero__info .c-text {
    display: block;
  }
  .s-hero__info .c-btn {
    display: inline-block;
  }
}
.s-hero__info + .s-hero__info {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin: 0 auto;
}

@media screen and (min-width: 992px) {
  .s-hero__info + .s-hero__info {
    -webkit-box-ordinal-group: initial;
        -ms-flex-order: initial;
            order: initial;
  }
}
.s-hero__img {
  position: relative;
  max-width: 611px;
  margin: -30px;
}

@media screen and (min-width: 992px) {
  .s-hero__img {
    margin: 0;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    max-width: calc(100% - 410px);
  }
  .s-hero__img .c-text {
    display: none;
  }
  .s-hero__img .c-btn {
    display: none;
  }
}
.s-hero__button {
  position: absolute;
  right: 21px;
  top: 34px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 6px 10px 6px 6px;
  border-radius: 6px;
  background: linear-gradient(334deg, #f02a08 0%, #ff994f 63.09%, #f02a08 100%);
  background-size: 300% 300%;
  background-position: 0% 50%;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-transition: background-position 0.5s ease-in-out, -webkit-transform 0.5s ease;
  transition: background-position 0.5s ease-in-out, -webkit-transform 0.5s ease;
  transition: background-position 0.5s ease-in-out, transform 0.5s ease;
  transition: background-position 0.5s ease-in-out, transform 0.5s ease, -webkit-transform 0.5s ease;
}

.s-hero__button span {
  padding: 0 8px;
  border-radius: 3px;
  background-color: #fff;
  color: #FF462A;
}

.s-hero__button:hover {
  background-position: 100% 0%;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 767px) {
  .s-hero__button {
    display: none;
  }
}

.c-title__main {
  margin: 0 0 19px;
}

.s-card {
  padding: 36px 0;
  /*background-color: tools.palette(primary-white);*/
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(217, 217, 217, 0.25)), color-stop(43.23%, rgba(217, 217, 217, 0)));
  background: linear-gradient(180deg, rgba(217, 217, 217, 0.25) 0%, rgba(217, 217, 217, 0) 43.23%);
  background-size: 100% 207px;
  background-repeat: no-repeat;
}

@media screen and (min-width: 768px) {
  .s-card {
    padding: 80px 0 120px;
  }
  .s-card .c-card {
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  .s-card .u-row {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}
@media screen and (min-width: 768px) {
  .s-card .u-col__two {
    margin-bottom: 48px;
  }
}
.s-card__cta {
  margin-top: 38px;
}

@media screen and (min-width: 768px) {
  .s-card__cta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-top: 33px;
    margin-top: 42px;
    border-top: 1px solid #8F959B;
  }
}
.s-card__cta .c-btn {
  margin-bottom: 23px;
}

@media screen and (min-width: 768px) {
  .s-card__cta .c-btn {
    margin-right: 16px;
  }
}
.s-card__cta-text {
  font-size: calc(16 / 16 * 1rem);
  line-height: calc(25 / 16);
  font-weight: 400;
  color: #2E3133;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .s-card__cta-text {
    font-weight: 700;
    text-align: left;
    max-width: 700px;
  }
}
.s-logos {
  padding: 55px 0;
}

@media screen and (min-width: 768px) {
  .s-logos {
    padding: 53px 0 36px;
  }
}
.s-logos .c-btn__link {
  margin: 0 auto;
}

.s-logos__title {
  font-size: calc(18 / 16 * 1rem);
  line-height: calc(21 / 18);
  font-weight: 400;
  color: #454F59;
  margin-bottom: 54px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .s-logos__title {
    margin-bottom: 35px;
  }
}
.s-logos__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 38px;
  margin-bottom: 35px;
}

@media screen and (min-width: 768px) {
  .s-logos__content {
    margin-bottom: 30px;
  }
}
.s-sample {
  padding: 54px 0 46px;
}

@media screen and (min-width: 768px) {
  .s-sample .u-row {
    margin: 0 -48px;
  }
}
@media screen and (min-width: 768px) {
  .s-sample .u-col__two {
    padding: 0 48px;
  }
}
.s-sample__title {
  font-size: calc(23 / 16 * 1rem);
  line-height: calc(26 / 23);
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.03em;
  margin-bottom: 39px;
}

@media screen and (min-width: 768px) {
  .s-sample__title {
    margin-bottom: 5px;
  }
}
.s-sample__subtitle {
  display: none;
  font-size: calc(14 / 16 * 1rem);
  line-height: calc(25 / 14);
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  margin-bottom: 28px;
}

@media screen and (min-width: 768px) {
  .s-sample__subtitle {
    display: block;
  }
}
.s-sample__image {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  -webkit-box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
  margin: 0 auto 30px;
}

@media screen and (min-width: 414px) {
  .s-sample__image {
    max-width: 70%;
  }
}
@media screen and (min-width: 768px) {
  .s-sample__image {
    max-width: 100%;
  }
}
@media screen and (min-width: 992px) {
  .s-sample__image {
    max-height: 251px;
  }
}
.s-sample__image .c-btn {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 7px 20px 6px;
  font-size: calc(12 / 16 * 1rem);
  line-height: calc(24 / 12);
  font-weight: 700;
  position: absolute;
  bottom: 18px;
  left: 18px;
  -webkit-box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
}

.s-sample__discription {
  font-size: calc(14 / 16 * 1rem);
  line-height: calc(25 / 14);
  font-weight: 400;
  color: #ffffff;
}

.s-sample__discription a {
  color: #ffffff;
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .s-sample__discription {
    color: #454F59;
  }
  .s-sample__discription a {
    color: #FF462A;
  }
}
.s-diagram {
  padding: 53px 0 62px;
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .s-diagram {
    padding: 43px 0 73px;
  }
}
@media screen and (min-width: 992px) {
  .s-diagram {
    padding: 43px 0 110px;
    background-image: url("/img3/marketing/diagram-bg.svg");
    background-repeat: no-repeat;
    background-size: 1280px 453px;
    background-position: center bottom;
  }
  .s-diagram::after, .s-diagram::before {
    position: absolute;
    content: "";
    bottom: 0;
    height: 453px;
    width: 150px;
    background: -webkit-gradient(linear, left top, right top, color-stop(33.12%, #FFFFFF), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(90deg, #FFFFFF 33.12%, rgba(255, 255, 255, 0) 100%);
  }
  .s-diagram::after {
    left: calc(50% + 490px);
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .s-diagram::before {
    right: calc(50% + 490px);
  }
}
.s-diagram .c-title__section {
  text-align: center;
  margin-bottom: 30px;
}

.s-diagram__arrows {
  display: none;
  position: absolute;
  bottom: 456px;
  width: 824px;
  left: 50%;
  -webkit-transform: translate(-50%, 100%);
      -ms-transform: translate(-50%, 100%);
          transform: translate(-50%, 100%);
  z-index: -1;
}

@media screen and (min-width: 992px) {
  .s-diagram__arrows {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  .s-diagram__wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media screen and (min-width: 992px) {
  .s-diagram__wrap {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 0 -20px;
  }
}
.s-diagram__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 25px;
  margin-bottom: 36px;
}

.s-diagram__item::after {
  position: absolute;
  content: "";
  top: -34px;
  left: 23px;
  width: 18px;
  height: 12px;
  background-image: url("/img3/marketing/icons/diagram/arrow-down.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.s-diagram__item::before {
  position: absolute;
  content: "";
  height: calc(100% + 36px);
  width: 3px;
  background-image: url("/img3/marketing/icons/diagram/line.svg");
  background-size: 3px auto;
  background-position: center -4px;
  background-repeat: no-repeat;
  top: 0;
  left: 31px;
  z-index: -1;
}

.s-diagram__item:last-child {
  margin-bottom: 0;
}

.s-diagram__item:last-child::before {
  display: none;
}

.s-diagram__item:first-child::after {
  display: none;
}

@media screen and (min-width: 768px) {
  .s-diagram__item {
    width: 50%;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-left: 32px;
  }
  .s-diagram__item::before, .s-diagram__item::after {
    display: none;
  }
}
@media screen and (min-width: 992px) {
  .s-diagram__item {
    padding-left: 0;
    margin-bottom: 0;
    display: block;
    width: 170px;
  }
  .s-diagram__item:nth-of-type(1) {
    margin-top: 28px;
  }
  .s-diagram__item:nth-of-type(2) {
    margin-top: 46px;
  }
  .s-diagram__item:nth-of-type(3) {
    margin-top: 109px;
  }
  .s-diagram__item:nth-of-type(4) {
    margin-top: 142px;
  }
  .s-diagram__item:nth-of-type(5) {
    margin-top: 121px;
  }
}
.s-diagram__icon {
  width: 65px;
  height: 65px;
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media screen and (min-width: 992px) {
  .s-diagram__icon {
    width: 113px;
    height: 113px;
    margin: 0 auto;
    margin-bottom: 18px;
  }
  .s-diagram__icon img {
    width: auto;
  }
}
.s-diagram__item-title {
  font-size: calc(16 / 16 * 1rem);
  line-height: calc(21 / 16);
  font-weight: 700;
  color: #454F59;
  margin-bottom: 10px;
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .s-diagram__item-title {
    font-size: calc(20 / 16 * 1rem);
    line-height: calc(21 / 20);
    font-weight: 700;
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 992px) {
  .s-diagram__item-title {
    margin-top: 0;
    text-align: center;
  }
}
.s-diagram__item-title a {
  color: inherit;
}

.s-diagram__list {
  list-style: none;
}

.s-diagram__list li {
  position: relative;
  padding-left: 22px;
  color: #454F59;
  font-size: calc(14 / 16 * 1rem);
  line-height: calc(21 / 14);
  font-weight: 400;
  margin-top: 12px;
}

.s-diagram__list li:first-child {
  margin-top: 0;
}

.s-diagram__list li::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 10px;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #454F59;
}

.s-videos__content {
  background-color: #F0F0F1;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35);
          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  background: url("/img3/marketing/video-container-background.svg") no-repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.s-videos__content iframe {
  width: 100%;
  height: 100%;
}

.s-videos__content .video {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.s-videos__content:hover {
  -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.35);
          box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.35);
}

.s-video__switch {
  text-align: center;
  margin-top: 15px;
}

.s-video__switch .active {
  background: none repeat scroll 0 0 #fb3618;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .s-video__switch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
  }
}

.c-title__section.videos {
  text-align: center;
  margin: 0 0 50px;
}

.s-monitor {
  padding: 56px 0;
  background: radial-gradient(180.41% 140.31% at 36.19% 26.96%, #FFF 0%, #EFEFEF 100%);
  background-repeat: no-repeat;
}

.s-monitor .c-title__section {
  margin-bottom: 25px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .s-monitor .c-title__section {
    margin-bottom: 10px;
  }
}
.s-monitor .c-list__item {
  padding-left: 0;
}

.s-monitor li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.s-monitor li .icon {
  width: 24px;
  height: 24px;
  background-size: 24px;
  margin-right: 16px;
}

.s-monitor__subtitle {
  font-size: calc(16 / 16 * 1rem);
  line-height: calc(24 / 16);
  font-weight: 400;
  color: #454F59;
  text-align: center;
  margin-bottom: 32px;
}

@media screen and (min-width: 768px) {
  .s-monitor__subtitle {
    font-size: calc(18 / 16 * 1rem);
    line-height: calc(21 / 18);
    font-weight: 400;
    margin-bottom: 60px;
  }
}
.s-monitor__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 40px;
}

@media screen and (min-width: 768px) {
  .s-monitor__content {
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}
.s-monitor__image img {
  -webkit-box-shadow: 0 5px 38px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 38px 0 rgba(0, 0, 0, 0.1);
  border-radius: 11px;
}

/* ==========================================================================
   Config settings
   ========================================================================== */
/* Media query mixin for writing Mobile First
 * ========================================== */
/**
 *  Global color variables.
 *	The underscore 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.
 */
/** =====================================================================================
 *  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
 */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  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
 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */
.o-header {
  position: sticky;
  top: -92px;
  background-color: #ffffff;
  border-bottom: 1px solid #D4D4D4;
  z-index: 20;
}

@media screen and (min-width: 768px) {
  .o-header {
    border-bottom: none;
  }
}
.o-header.static {
  position: static;
}

/* ==========================================================================
 * 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, 500);
    }

    .myClass {
      @include font(medium, $weight: 300);
    }

 */
.o-footer {
  padding: 50px 0 70px;
  background: #242424;
}

@media screen and (min-width: 768px) {
  .o-footer {
    padding-bottom: 80px;
  }
}
@media screen and (min-width: 768px) {
  .o-footer .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
  }
}
.o-footer__list {
  list-style: none;
  margin-bottom: 32px;
}

.o-footer__list:last-of-type {
  margin-bottom: 50px;
}

@media screen and (min-width: 768px) {
  .o-footer__list {
    margin-bottom: 0;
    margin-right: 73px;
  }
}
.o-footer__list li {
  font-size: calc(13 / 16 * 1rem);
  line-height: calc(22 / 13);
  font-weight: 400;
  color: #F0F0F1;
  margin-bottom: 10px;
}

.o-footer__list li a {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #ffffff;
}

.o-footer__list li a:hover {
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .o-footer__right {
    margin-left: auto;
  }
}
.o-footer__social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}

.o-footer__social-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
}

.o-footer__social-list-item {
  width: 34px;
  height: 34px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.o-footer__social-list-item img {
  max-width: 34px;
}

.o-footer__rated-text, .o-footer__rated-text a {
  font-size: calc(11 / 16 * 1rem);
  line-height: calc(18 / 11);
  font-weight: 400;
  color: #F0F0F1;
  margin-bottom: 4px;
}

.o-footer__rated-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 7px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.o-footer__rated-icons img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.o-footer__logo {
  margin-bottom: 7px;
  display: block;
}

.o-footer__logo img {
  height: 14px;
  width: auto;
}

.o-footer__copy {
  font-size: calc(11 / 16 * 1rem);
  line-height: calc(20 / 11);
  font-weight: 400;
  color: #BCBDBD;
  margin-bottom: 17px;
}

.o-footer__tls {
  height: 32px;
  width: auto;
  display: inline-block;
}

/*  7 - UTILITIES
 *  High-specificity, very explicit selectors.
 *  Overrides and helper classes.
 =========================================================== */
/**
 *  Global color variables.
 *	The underscore 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
   ========================================================================== */
/** =====================================================================================
 *  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
 */
/* Media query mixin for writing Mobile First
 * ========================================== */
/** =====================================================================================
 *  Toolbox functions
 ===================================================================================== */
/**
 *  Maths helpers.
 *  Halve and double numbers, returning rounded integers.

    USAGE:

    .foo {
        padding: halve(30px);
    }

 */
/**
 *  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
 */
/*
 *  Restrict an element to a max-width for creating gutters on the side
 */

/* ==========================================================================
 * 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, 500);
    }

    .myClass {
      @include font(medium, $weight: 300);
    }

 */

.u-col__single {
  max-width: 700px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .u-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -24px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.u-col__two + .u-col__two {
  margin-top: 50px;
}

@media screen and (min-width: 768px) {
  .u-col__two + .u-col__two {
    margin-top: 0;
  }
}
@media screen and (min-width: 768px) {
  .u-col__two {
    width: 50%;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding: 0 24px;
  }
}
.u-bg--orange {
  position: relative;
  background-color: #EE543A;
}

.u-bg--orange::after {
  position: absolute;
  content: "";
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  height: 100%;
  width: 100%;
  background: url(../../../img3/marketing/orange-bg-mobile.svg) #EE543A no-repeat;
  background-size: 100% auto;
  background-position: center;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .u-bg--orange::after {
    height: 295px;
    background: url(../../../img3/marketing/orange-bg.svg) #EE543A no-repeat;
    background-position: center;
    background-size: auto 333px;
    top: 0;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
}
@media screen and (min-width: 992px) {
  .u-bg--orange::after {
    height: 333px;
  }
}
@media screen and (min-width: 768px) {
  .u-bg--orange {
    background-color: transparent;
  }
}
.u-bg--orange > * {
  position: relative;
  z-index: 2;
}

/* Special */

.s-features__content a {
  color: inherit;
}