/*
 	Project: Eximius Corporate Website
	Developed by: Eximius-Solutions

	Table of content:
    01. Colors
	02. Background colors
    03. Fonts
	04. Globals
	05. Partials
	06. Components
	07. Page specifics
	08. Spacings

*/
/* 
	==== Colors ==== 
*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
.text-color-white {
  color: #FFFFFF;
}

.text-color-black {
  color: #000000;
}

.text-color-gray {
  color: #3c484e;
}

.text-color-purple {
  color: #60308e;
}

.text-color-red {
  color: #e6213b;
}

.text-black h1,
.text-black h2,
.text-black h3,
.text-black h4,
.text-black h5,
.text-black h6,
.text-black p,
.text-black .subtitle {
  color: #3c484e !important;
}
.text-black .button.button--secondary, .text-black .button--secondary {
  color: #3c484e !important;
  border-color: #3c484e !important;
}
.text-black .button.button--secondary:hover, .text-black .button--secondary:hover {
  background-color: #3c484e !important;
  color: #FFFFFF !important;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white .subtitle {
  color: #FFFFFF !important;
}
.text-white .button.button--secondary, .text-white .button--secondary {
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}
.text-white .button.button--secondary:hover, .text-white .button--secondary:hover {
  background-color: #FFFFFF !important;
  color: #3c484e !important;
}

/* 
    ==== Backgrounds ==== 
*/
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
.bg-white {
  background-color: #FFFFFF;
}

.bg-pure-black {
  background-color: #000000;
}

.bg-purple {
  background-color: #60308e;
}

.bg-red {
  background-color: #e6213b;
}

.bg-dark-gray {
  background-color: #3c484e;
}

.bg-red-purple-gradient {
  background-image: linear-gradient(to left, #60308e, #e6213b);
}

.bg-purple-red-gradient {
  background-image: linear-gradient(to right, #60308e, #e6213b);
}

.background-image, .bg-purple-gradient, .bg-red-gradient {
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-red-gradient {
  background-image: url("../../img/backgrounds/red-gradient-background.webp");
}

.bg-purple-gradient {
  background-image: url("../../img/backgrounds/purple-gradient-background.webp");
}

/* 
	==== Fonts ==== 
*/
/*
    File Name: _fonts.scss

    Description:
    This is the fonts SCSS file that imports styles realted to fonts.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== FONT FAMILY ====

    Description:
        All font familys used accros the project.

    Modificators:
        No modificators.

*/
@font-face {
  font-family: "primary-regular";
  src: url("../../fonts/Poppins-Regular.woff");
  font-display: swap;
}
@font-face {
  font-family: "primary-medium";
  src: url("../../fonts/Poppins-Medium.woff");
  font-display: swap;
}
@font-face {
  font-family: "primary-light";
  src: url("../../fonts/Poppins-Light.woff");
  font-display: swap;
}
@font-face {
  font-family: "primary-semi-bold";
  src: url("../../fonts/Poppins-SemiBold.woff");
  font-display: swap;
}
@font-face {
  font-family: "primary-bold";
  src: url("../../fonts/Poppins-Bold.woff");
  font-display: swap;
}
@font-face {
  font-family: "primary-italic";
  src: url("../../fonts/Poppins-Italic.woff");
  font-display: swap;
}
@font-face {
  font-family: "secondary-regular";
  src: url("../../fonts/Gloock-Regular.woff");
  font-display: swap;
}
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
.font--extra-small {
  font-size: 1.4rem;
}

.font--small {
  font-size: 1.8rem;
}

.font--medium-small {
  font-size: 2rem;
}

.font--medium {
  font-size: 2.3rem;
}

.font--large {
  font-size: 2.8rem;
}

.font--medium-large {
  font-size: 4.6rem;
}

.font--extra-large {
  font-size: 5.4rem;
}

/* 
	==== Global ==== 
*/
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== GLOBALS ====

    Description:
        Global styles.

    Modificators:
        No modificators.

*/
:root {
  font-size: 62.5%;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html.screen-locked {
  overflow-y: hidden;
}

body {
  margin: 0;
  padding: 0;
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  font-size: 1.8rem;
  color: #3c484e;
  padding-top: var(--headerHeight);
}

h1 {
  font-family: "secondary-regular", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 5.4rem;
  line-height: 5.4rem;
  margin-top: 70px;
  margin-bottom: 40px;
}

h2 {
  font-family: "secondary-regular", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 4.6rem;
  line-height: 4.6rem;
  margin-top: 70px;
  margin-bottom: 35px;
}

h3 {
  font-family: "secondary-regular", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 2.8rem;
  line-height: 2.8rem;
  margin-top: 65px;
  margin-bottom: 30px;
}

h4 {
  font-family: "secondary-regular", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 2.5rem;
  line-height: 2.5rem;
  margin-top: 60px;
  margin-bottom: 25px;
}

h5 {
  font-family: "secondary-regular", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 2.2rem;
  line-height: 2.2rem;
  margin-top: 40px;
  margin-bottom: 20px;
}

h6 {
  font-family: "secondary-regular", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 2rem;
  line-height: 2rem;
  margin-top: 30px;
  margin-bottom: 20px;
}

h1.line-decoration,
h2.line-decoration,
h3.line-decoration,
h4.line-decoration,
h5.line-decoration,
h6.line-decoration {
  position: relative;
  padding-bottom: 35px;
}
h1.line-decoration::before,
h2.line-decoration::before,
h3.line-decoration::before,
h4.line-decoration::before,
h5.line-decoration::before,
h6.line-decoration::before {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  position: absolute;
  background-color: #60308e;
  display: inline-block;
  left: 0;
  bottom: 0;
}

a {
  color: #60308e;
  text-decoration: none;
  font-size: 1.8rem;
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
}
a:hover {
  text-decoration: underline;
}

p {
  font-size: 1.8rem;
}

strong {
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
  font-weight: 500;
}

img {
  max-width: 100%;
  width: auto;
  height: auto;
}

p + img,
ul + img {
  margin-top: 50px;
}

section {
  position: relative;
}
section .container-fluid {
  z-index: 1;
  position: relative;
}

ul {
  padding-left: 50px;
}
ul li {
  padding-left: 20px;
  margin-bottom: 40px;
}
ul li:last-child {
  margin-bottom: 0;
}
ul li::marker {
  color: #3c484e;
  font-size: 1.5rem;
}

ol {
  padding-left: 50px;
}
ol li {
  padding-left: 20px;
  margin-bottom: 40px;
}
ol li:last-child {
  margin-bottom: 0;
}
ol li::marker {
  color: #3c484e;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.rotate {
  transform: rotate(180deg) !important;
}

.display-block {
  display: block !important;
}

.display-inline-block {
  display: inline-block !important;
}

.display-inline {
  display: inline !important;
}

.display-flex {
  display: flex !important;
}

.display-grid {
  display: grid !important;
}

.display-none {
  display: none !important;
}

.border-top-gray {
  border-top: 1px solid #e0e5e8 !important;
}

.border-bottom-gray {
  border-bottom: 1px solid #e0e5e8 !important;
}

.border-left-gray {
  border-left: 1px solid #e0e5e8 !important;
}

.border-right-gray {
  border-right: 1px solid #e0e5e8 !important;
}

.border-all-gray {
  border: 1px solid #e0e5e8 !important;
}

.screen-locked.ios-device {
  position: fixed;
  touch-action: manipulation;
  user-scalable: no;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
.screen-locked.ios-device .popup-wrapper {
  opacity: 0.8;
}

@media (min-width: 1400px) {
  .container {
    max-width: 1200px;
  }
}
.bg-purple,
.bg-purple-gradient {
  color: #FFFFFF;
}
.bg-purple a,
.bg-purple-gradient a {
  color: #000000;
}
.bg-purple p,
.bg-purple button,
.bg-purple-gradient p,
.bg-purple-gradient button {
  color: #FFFFFF;
}
.bg-purple ul li::marker,
.bg-purple-gradient ul li::marker {
  color: #fff;
}
.bg-purple ol li::marker,
.bg-purple-gradient ol li::marker {
  color: #fff;
}

.bg-red,
.bg-purple-red-gradient,
.bg-red-purple-gradient,
.bg-red-gradient {
  color: #FFFFFF;
}
.bg-red a,
.bg-purple-red-gradient a,
.bg-red-purple-gradient a,
.bg-red-gradient a {
  color: #000000;
}
.bg-red p,
.bg-red button,
.bg-purple-red-gradient p,
.bg-purple-red-gradient button,
.bg-red-purple-gradient p,
.bg-red-purple-gradient button,
.bg-red-gradient p,
.bg-red-gradient button {
  color: #FFFFFF;
}
.bg-red ul li::marker,
.bg-purple-red-gradient ul li::marker,
.bg-red-purple-gradient ul li::marker,
.bg-red-gradient ul li::marker {
  color: #fff;
}
.bg-red ol li::marker,
.bg-purple-red-gradient ol li::marker,
.bg-red-purple-gradient ol li::marker,
.bg-red-gradient ol li::marker {
  color: #fff;
}

.bg-pure-black {
  color: #FFFFFF;
}
.bg-pure-black p,
.bg-pure-black button {
  color: #FFFFFF;
}
.bg-pure-black ul li::marker {
  color: #fff;
}
.bg-pure-black ol li::marker {
  color: #fff;
}

.screen-locked.ios-device {
  position: fixed;
}

.section-bg-image {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.section-bg-image::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.9;
}
.section-bg-image img {
  width: 100%;
  height: 100%;
  max-width: unset;
  -o-object-fit: cover;
     object-fit: cover;
}

.separator {
  height: 1px;
  background-color: #e0e5e8;
  position: relative;
  margin: 50px 0;
}
.separator::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #60308e;
  height: 1px;
  width: 50px;
}

.no-bg-overlay .section-bg-image::before {
  content: none;
}

.bg-purple .section-bg-image::before {
  background-color: #60308e;
}

.bg-red .section-bg-image::before {
  background-color: #e6213b;
}

.bg-white .section-bg-image::before {
  background-color: #FFFFFF;
}

.bg-red-purple-gradient .section-bg-image::before {
  background: linear-gradient(to left, #60308e, #e6213b);
}

.bg-purple-red-gradient .section-bg-image::before {
  background: linear-gradient(to right, #60308e, #e6213b);
}

@media (max-width: 575px) {
  h1 {
    font-family: "secondary-regular", Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 4.6rem;
    line-height: 4.6rem;
    margin-top: 65px;
    margin-bottom: 30px;
  }
  h2 {
    font-family: "secondary-regular", Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 3.8rem;
    line-height: 3.8rem;
    margin-top: 65px;
    margin-bottom: 30px;
  }
  h3 {
    font-family: "secondary-regular", Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 2.8rem;
    line-height: 2.8rem;
    margin-top: 65px;
    margin-bottom: 30px;
  }
  h4 {
    font-family: "secondary-regular", Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-top: 60px;
    margin-bottom: 25px;
  }
  h5 {
    font-family: "secondary-regular", Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 2.2rem;
    line-height: 2.2rem;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  h6 {
    font-family: "secondary-regular", Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 2rem;
    line-height: 2rem;
    margin-top: 30px;
    margin-bottom: 20px;
  }
}
/* 
	==== Partials ==== 
*/
/*
    File Name: _partials.scss

    Description:
    This is the partials SCSS file that imports all partials.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

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

    Description: 
        This is header of website. Also, this file contains style for main site menu.

    Modificators:
        No modificators.
*/
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: 0.2s ease;
  z-index: 10;
  background-color: #FFFFFF;
  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.06);
}
header.header--transparent {
  background-color: transparent;
  box-shadow: none;
}
header .container-fluid {
  position: relative;
}
header.hide {
  transform: translateY(calc(-100% - 10px));
  transition: 0.2s ease;
}
header.hide::before {
  content: none;
}
header.show {
  transform: translateY(0);
}
header.floating-header {
  background-color: #fff;
  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.06);
}
header.floating-header::before {
  content: none;
}
header .container,
header .container-fluid {
  padding: 0;
  max-width: initial;
  width: 100%;
}
header .header__inner {
  display: grid;
  grid-template-columns: auto 170px;
  align-items: end;
}
header .header__inner .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-right: 35px;
  padding-left: 60px;
}
header .header__inner .content .logo-wrapper {
  display: inline-block;
  font-size: 0;
}
header .header__inner .content .logo-wrapper .logo {
  display: inline-flex;
  align-items: center;
}
header .header__inner .content .logo-wrapper .logo .additional-text {
  font-size: 1.4rem;
  margin-left: 30px;
  color: #3c484e;
  display: flex;
  align-items: center;
}
header .header__inner .content .logo-wrapper .logo .additional-text .additional-text__inner {
  line-height: 1.5rem;
  margin-top: -4px;
}
header .header__inner .content .logo-wrapper .logo .additional-text .additional-text__images {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
header .header__inner .content .logo-wrapper .logo .additional-text .additional-text__images .image {
  margin-right: 20px;
  max-width: 140px;
  font-size: 0;
}
header .header__inner .content .logo-wrapper .logo .additional-text .additional-text__images .image:last-child {
  margin-right: 0;
}
header .header__inner .content .logo-wrapper .logo a {
  display: inline-block;
  font-size: 0;
}
header .header__inner .content .menu-wrapper {
  display: inline-block;
  padding: 28.5px 0;
}
header .header__inner .content .menu-wrapper .menu__inner {
  display: flex;
  justify-content: space-between;
}
header .header__inner .content .menu-wrapper .menu__inner .hamburger-button {
  margin-left: 70px;
}
header .navigation-menu {
  display: flex;
  align-items: center;
}
header .navigation-menu ul {
  margin: 0;
  padding: 0;
}
header .navigation-menu ul li {
  list-style: none;
  display: inline-block;
  margin-right: 70px;
  padding-left: 0;
  margin-bottom: 0;
}
header .navigation-menu ul li a {
  font-size: 1.6rem;
}
header .header__inner .language-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
header .header__inner .language-wrapper .language__inner {
  width: 100%;
  display: flex;
  position: relative;
}
header .header__inner .language-wrapper .language__inner > img {
  margin-right: 10px;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
header .header__inner .language-wrapper .language__inner button.language {
  font-size: 1.6rem;
  line-height: 1.6rem;
  display: flex;
  align-items: center;
}
header .header__inner .language-wrapper .language__inner button.language img {
  margin-right: 9px;
}
header .header__inner .language-wrapper .choices {
  min-width: 60px;
  width: 100%;
  padding: 10px;
}
header .header__inner .language-wrapper .choices .choices__inner {
  padding: 0 20px 0 40px !important;
}
header .header__inner .language-wrapper .choices[data-type*=select-one] .choices__inner {
  background-color: transparent;
  border: 0;
}
header .header__inner .language-wrapper .choices .choices__list.choices__list--single .choices__item {
  color: #fff;
  opacity: 1 !important;
}
header .header__inner .language-wrapper .choices .choices__item {
  font-size: 1.6rem;
  line-height: 1.8rem;
}
header .header__inner .language-wrapper .choices .choices__list.choices__list--dropdown {
  width: 170px;
  left: 0;
  top: calc(var(--headerHeight) - 18px);
}
header .header__inner .language-wrapper .choices .choices__list.choices__list--dropdown .choices__item,
header .header__inner .language-wrapper .choices .choices__list.choices__list--dropdown .choices__item.choices__placeholder {
  padding: 20px 15px !important;
}

header.hide .choices .choices__list.choices__list--dropdown {
  display: none;
}

header .navigation-menu {
  /*
      ==== FIRST LEVEL ====
  */
  /*
      ==== SECOND LEVEL ====
  */
  /*
      ==== THIRD LEVEL ====
  */
}
header .navigation-menu ul.active {
  display: block;
}
header .navigation-menu ul li {
  position: relative;
  padding-left: 0;
}
header .navigation-menu ul li a {
  display: inline-block;
}
header .navigation-menu .dropdown-button {
  padding: 10px;
  font-size: 0;
  line-height: 0;
  position: absolute;
  right: -30px;
  top: 0;
  transition: 0.2s ease;
}
header .navigation-menu .dropdown-button.active {
  transform: rotate(180deg);
  transition: 0.2s ease;
}
header .navigation-menu > ul > li.active-page {
  position: relative;
}
header .navigation-menu > ul > li.active-page::before {
  content: "";
  display: block;
  width: calc(100% + 10px);
  height: 1px;
  position: absolute;
  background-color: #60308e;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
}
header .navigation-menu > ul > li.active-page > a:hover {
  text-decoration: none;
}
header .navigation-menu > ul > li:last-child {
  margin-right: 40px;
}
header .navigation-menu > ul > li > ul {
  background-color: #fff;
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 45px;
  min-width: 200px;
  border-radius: 7px;
  padding: 12px 20px;
  transform: translateX(-20px);
  box-shadow: 0px 20px 57px 0px rgba(0, 0, 0, 0.15);
}
header .navigation-menu > ul > li > ul::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -15px;
  left: 20px;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #ffffff;
}
header .navigation-menu > ul > li > ul > li {
  margin-right: 0;
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #e0e5e8;
}
header .navigation-menu > ul > li > ul > li.active-page::before {
  content: none;
}
header .navigation-menu > ul > li > ul > li.active-page > a {
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
}
header .navigation-menu > ul > li > ul > li:first-child {
  padding-top: 0;
  border-top: none;
}
header .navigation-menu > ul > li > ul > li:last-child {
  padding-bottom: 0;
}
header .navigation-menu > ul > li > ul > li > .dropdown-button {
  top: 10px;
  right: -10px;
}
header .navigation-menu > ul > li > ul > li > a {
  transition: 0.2s ease;
  color: #000000;
}
header .navigation-menu > ul > li > ul > li > a:hover {
  transform: translateX(5px);
  color: #60308e;
  text-decoration: none;
}
header .navigation-menu > ul > li > ul > li > ul {
  display: none;
  padding-left: 20px;
  position: relative;
}
header .navigation-menu > ul > li > ul > li > ul::before {
  content: "";
  display: block;
  width: 2px;
  height: calc(100% - 30px);
  position: absolute;
  display: block;
  top: 15px;
  bottom: 15px;
  left: 0;
  background-color: #60308e;
}
header .navigation-menu > ul > li > ul > li > ul > li {
  margin-right: 0;
  display: block;
  padding-bottom: 10px;
}
header .navigation-menu > ul > li > ul > li > ul > li.active-page::before {
  content: none;
}
header .navigation-menu > ul > li > ul > li > ul > li.active-page > a {
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
}
header .navigation-menu > ul > li > ul > li > ul > li:first-child {
  padding-top: 10px;
}
header .navigation-menu > ul > li > ul > li > ul > li > a {
  transition: 0.2s ease;
  color: #000000;
}
header .navigation-menu > ul > li > ul > li > ul > li > a:hover {
  transform: translateX(5px);
  color: #60308e;
  text-decoration: none;
}

@media (min-width: 1600px) {
  header button.hamburger-button {
    display: none;
  }
}
@media (max-width: 1599px) {
  header .header__inner .content {
    padding-right: 28px;
    padding-left: 28px;
  }
  header .header__inner .content .menu-wrapper .menu__inner .hamburger-button {
    margin-left: 20px;
  }
  header .header__inner .language-wrapper .choices__list.choices__list--dropdown {
    width: 170px;
    left: 0;
    top: calc(var(--headerHeight) - 15px) !important;
  }
  header .navigation-menu {
    position: fixed;
    top: 77px;
    right: 0;
    background: #fff;
    height: calc(100% - 77px);
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    align-items: flex-start;
    width: 400px;
    padding: 40px;
    transform: translateX(100%);
    transition: 0.3s ease;
    box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.06);
    /*
        ==== FIRST LEVEL ====
    */
    /*
        ==== SECOND LEVEL ====
    */
    /*
        ==== THIRD LEVEL ====
    */
  }
  header .navigation-menu.active {
    transform: translateX(0);
    transition: 0.3s ease;
  }
  header .navigation-menu ul {
    background-color: #fff;
  }
  header .navigation-menu ul li {
    width: 100%;
    display: block;
    margin-right: 0;
  }
  header .navigation-menu ul li.active-page::before {
    content: none;
  }
  header .navigation-menu ul li.active-page > a {
    font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
  }
  header .navigation-menu ul li:last-child {
    margin-right: 0;
  }
  header .navigation-menu > ul {
    width: 100%;
  }
  header .navigation-menu > ul > li {
    padding-bottom: 20px;
    padding-top: 20px;
    border-bottom: 1px solid #e0e5e8;
  }
  header .navigation-menu > ul > li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    margin-right: 0;
  }
  header .navigation-menu > ul > li > .dropdown-button {
    top: 20px;
    right: -10px;
  }
  header .navigation-menu > ul > li > a {
    color: #000000;
    transition: 0.2s ease;
  }
  header .navigation-menu > ul > li > a:hover {
    transform: translateX(5px);
    color: #60308e;
    text-decoration: none;
  }
  header .navigation-menu > ul > li > ul {
    position: static;
    min-width: unset;
    width: 100%;
    transform: translateY(0);
    border-radius: 0;
    box-shadow: none;
    padding-bottom: 0;
    padding-top: 20px;
    padding-right: 0;
  }
  header .navigation-menu > ul > li > ul::before {
    content: none;
  }
  header .navigation-menu > ul > li > ul > li {
    padding-bottom: 20px;
    padding-top: 20px;
  }
  header .navigation-menu > ul > li > ul > li:first-child {
    padding-top: 0;
  }
  header .navigation-menu > ul > li > ul > li:last-child {
    padding-bottom: 0;
  }
  header .navigation-menu > ul > li > ul > li > .dropdown-button {
    top: 20px;
    right: -10px;
  }
}
@media (max-width: 1300px) {
  header .header__inner .content {
    padding-right: 28px;
    padding-left: 28px;
  }
}
@media (max-width: 991px) {
  header .header__inner .content .logo-wrapper .logo .additional-text {
    display: none;
  }
}
@media (max-width: 500px) {
  header .navigation-menu {
    width: 100%;
  }
}
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== FOOTER ====

    Description: 
        This is footer of website. Also, this file contains styles for the postfooter of the website.

    Modificators:
        No modificators.
*/
footer {
  padding-top: 130px;
  padding-bottom: 50px;
}
footer .footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
footer .footer__inner .logo a {
  display: inline-block;
}
footer .footer__inner .logo .additional-text-wrapper {
  margin-top: 30px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}
footer .footer__inner .logo .additional-text-wrapper .text {
  font-size: 1.6rem;
  display: block;
  margin-bottom: 10px;
}
footer .footer__inner .logo .additional-text-wrapper img {
  filter: grayscale(1);
  transition: 0.2s ease;
  opacity: 0.3;
}
footer .footer__inner .logo .additional-text-wrapper img:hover {
  filter: none;
  transition: 0.2s ease;
  opacity: 1;
}
footer .footer__inner .logo .additional-text-wrapper > * {
  display: inline-block;
}
footer .footer__inner .logo .additional-text-wrapper .logo-holder {
  max-width: 181px;
  font-size: 0;
  display: block;
  margin-bottom: 20px;
}
footer .footer__inner .logo .additional-text-wrapper .logo-holder:last-child {
  margin-bottom: 0;
}
footer .footer__inner .navigation {
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 50px;
       column-gap: 50px;
}
footer .footer__inner .menu,
footer .footer__inner .additional-links {
  width: 50%;
}
footer .footer__inner .additional-links {
  display: flex;
  justify-content: flex-end;
}
footer .footer__inner .navigation ul {
  padding: 0;
  margin: 0;
}
footer .footer__inner .navigation ul li {
  list-style: none;
  line-height: 1.6rem;
  margin-bottom: 22px;
  padding-left: 0;
}
footer .footer__inner .navigation ul li:last-child {
  margin-bottom: 0;
}
footer .footer__inner .navigation ul li a {
  font-size: 1.6rem;
  line-height: 2rem;
}
footer .postfooter {
  font-size: 1.4rem;
  color: #60308e;
  margin-top: 50px;
}
footer .postfooter p,
footer .postfooter a {
  font-size: inherit;
  color: inherit;
}
footer .postfooter .postfooter__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
footer .postfooter .copyright {
  max-width: 70%;
  margin-right: 50px;
}
footer .postfooter .copyright p {
  margin-top: 0;
}
footer .postfooter .copyright p:last-child {
  margin-bottom: 0;
}
footer .postfooter .social-media-container ul {
  display: flex;
  margin: 0;
  padding: 0;
}
footer .postfooter .social-media-container ul li {
  list-style: none;
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
}
footer .postfooter .social-media-container ul li:not(:last-child) {
  margin-right: 11px;
}
footer .postfooter .social-media-container .social-media {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  border: 2px solid #60308e;
  box-sizing: content-box;
}
footer .postfooter .social-media-container .social-media img {
  max-width: 23px;
}
footer .postfooter .social-media-container .social-media a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transition: 0.2s ease;
}
footer .postfooter .social-media-container .social-media a:hover {
  background-color: rgba(0, 0, 0, 0.1);
  transition: 0.2s ease;
}

@media (min-width: 992px) {
  .footer__inner .logo .additional-text-wrapper .logo-holder.mobile {
    display: none;
  }
}
@media (max-width: 767px) {
  footer {
    padding-top: 50px;
  }
  footer .footer__inner {
    grid-template-columns: auto;
  }
  footer .footer__inner .logo {
    margin-bottom: 40px;
  }
}
@media (max-width: 500px) {
  footer .footer__inner .logo {
    text-align: center;
  }
  footer .footer__inner .navigation {
    flex-direction: column;
  }
  footer .footer__inner .menu,
  footer .footer__inner .additional-links {
    width: 100%;
    text-align: center;
  }
  footer .footer__inner .additional-links {
    display: block;
    margin-top: 22px;
  }
  footer .footer__inner .logo .additional-text-wrapper {
    align-items: center;
  }
  footer .postfooter .postfooter__inner {
    display: block;
  }
  footer .postfooter .copyright {
    max-width: unset;
    text-align: center;
    margin-right: 0;
    margin-bottom: 25px;
  }
  footer .postfooter .social-media-container ul {
    text-align: center;
    justify-content: center;
  }
}
/* 
	==== Components ==== 
*/
/*
    File Name: _components.scss

    Description:
    This is the fonts SCSS file that imports styles realted to components.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== BUTTONS ====

    Component description:
        Website buttons.

    Modificators:

    1. Primary button

        Description:             Primary button styles
        Hook element selector:   button, a
        Class to add:            button--primary

    2. Secondary button

        Description:             Secondary button styles
        Hook element selector:   button, a
        Class to add:            button--secondary

    3. Arrow button

        Description:             Arrow button styles
        Hook element selector:   button, a
        Class to add:            button--arrow

    4. Arrow button

        Description:             Hamburger button styles
        Hook element selector:   button, a
        Class to add:            hamburger-button

    5. Download button

        Description:             Download button style
        Hook element selector:   button, a
        Class to add:            button--download
*/
button,
.button,
.button--arrow,
.button--secondary,
.button--primary {
  display: inline-block;
  width: auto;
  padding: 9px 35px;
  margin: 0;
  border-radius: 0;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: 2.7rem;
  transition: 0.2s ease;
}
button:hover,
.button:hover,
.button--arrow:hover,
.button--secondary:hover,
.button--primary:hover {
  transition: 0.2s ease;
}

a.button:hover, a.button--arrow:hover, a.button--secondary:hover, a.button--primary:hover {
  text-decoration: none;
}

.button--primary {
  background-image: linear-gradient(to right, #60308e, #e6213b);
  position: relative;
  color: #FFFFFF;
  border-radius: 23px;
  background-color: transparent;
  position: relative;
}
.button--primary span {
  position: relative;
}
.button--primary::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  opacity: 0;
  border-radius: 23px;
  transition: 0.2s ease;
}
.button--primary:hover::before {
  opacity: 0.5;
  transition: 0.2s ease;
}

.button--secondary {
  background-color: transparent;
  color: #60308e;
  border: 1px solid #60308e;
  border-radius: 23px;
}
.button--secondary:hover {
  background-color: #60308e;
  color: #fff;
}

.button--arrow {
  font-size: 0;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  padding: 0;
  background-color: transparent;
  background-image: url("../../img/icons/arrows/arrow--right-purple.svg");
  background-position: center;
  background-size: 12px 18px;
  background-repeat: no-repeat;
  border: 1px solid #60308e;
}
.button--arrow:hover {
  background-color: #60308e;
  background-image: url("../../img/icons/arrows/arrow--right-white.svg");
}

button.hamburger-button {
  padding: 0;
}
button.hamburger-button span {
  position: relative;
  display: block;
  width: 32px;
  height: 2px;
  margin: 7px auto;
  background-color: #60308e;
  pointer-events: none;
  transition: all 0.2s;
}
button.hamburger-button span:first-child {
  margin-top: 0;
}
button.hamburger-button span:last-child {
  margin-bottom: 0;
}

button.button--download,
a.button--download {
  padding-right: 70px;
  position: relative;
}
button.button--download::after,
a.button--download::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-image: url("../../img/icons/icon--download.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
}
button.button--download.button--secondary::after,
a.button--download.button--secondary::after {
  background-image: url("../../img/icons/icon--download-purple.svg");
}
button.button--download.button--secondary:hover::after,
a.button--download.button--secondary:hover::after {
  background-image: url("../../img/icons/icon--download.svg");
}

.bg-purple .button--primary,
.bg-purple-gradient .button--primary {
  background-image: none;
  background-color: #e6213b;
  color: #fff;
}
.bg-purple .button--secondary,
.bg-purple-gradient .button--secondary {
  border-color: #99c459;
  color: #fff;
}
.bg-purple .button--secondary:hover,
.bg-purple-gradient .button--secondary:hover {
  background-color: #fff;
  border-color: #fff;
  color: #60308e;
}
.bg-purple .button--arrow,
.bg-purple-gradient .button--arrow {
  border-color: #fff;
  background-image: url("../../img/icons/arrows/arrow--right-white.svg");
}
.bg-purple .button--arrow:hover,
.bg-purple-gradient .button--arrow:hover {
  background-color: #fff;
  background-image: url("../../img/icons/arrows/arrow--right-purple.svg");
}
.bg-purple button.button--download.button--secondary::after,
.bg-purple a.button--download.button--secondary::after,
.bg-purple-gradient button.button--download.button--secondary::after,
.bg-purple-gradient a.button--download.button--secondary::after {
  background-image: url("../../img/icons/icon--download.svg");
}
.bg-purple button.button--download.button--secondary:hover::after,
.bg-purple a.button--download.button--secondary:hover::after,
.bg-purple-gradient button.button--download.button--secondary:hover::after,
.bg-purple-gradient a.button--download.button--secondary:hover::after {
  background-image: url("../../img/icons/icon--download-purple.svg");
}

.bg-red .button--primary,
.bg-red-purple-gradient .button--primary,
.bg-purple-red-gradient .button--primary,
.bg-red-gradient .button--primary {
  background-image: none;
  background-color: #60308e;
  color: #fff;
}
.bg-red .button--secondary,
.bg-red-purple-gradient .button--secondary,
.bg-purple-red-gradient .button--secondary,
.bg-red-gradient .button--secondary {
  border-color: #fff;
  color: #fff;
}
.bg-red .button--secondary:hover,
.bg-red-purple-gradient .button--secondary:hover,
.bg-purple-red-gradient .button--secondary:hover,
.bg-red-gradient .button--secondary:hover {
  background-color: #fff;
  color: #e6213b;
}
.bg-red .button--arrow,
.bg-red-purple-gradient .button--arrow,
.bg-purple-red-gradient .button--arrow,
.bg-red-gradient .button--arrow {
  border-color: #fff;
  background-image: url("../../img/icons/arrows/arrow--right-white.svg");
}
.bg-red .button--arrow:hover,
.bg-red-purple-gradient .button--arrow:hover,
.bg-purple-red-gradient .button--arrow:hover,
.bg-red-gradient .button--arrow:hover {
  background-color: #fff;
  background-image: url("../../img/icons/arrows/arrow--right-red.svg");
}
.bg-red button.button--download.button--secondary::after,
.bg-red a.button--download.button--secondary::after,
.bg-red-purple-gradient button.button--download.button--secondary::after,
.bg-red-purple-gradient a.button--download.button--secondary::after,
.bg-purple-red-gradient button.button--download.button--secondary::after,
.bg-purple-red-gradient a.button--download.button--secondary::after,
.bg-red-gradient button.button--download.button--secondary::after,
.bg-red-gradient a.button--download.button--secondary::after {
  background-image: url("../../img/icons/icon--download.svg");
}
.bg-red button.button--download.button--secondary:hover::after,
.bg-red a.button--download.button--secondary:hover::after,
.bg-red-purple-gradient button.button--download.button--secondary:hover::after,
.bg-red-purple-gradient a.button--download.button--secondary:hover::after,
.bg-purple-red-gradient button.button--download.button--secondary:hover::after,
.bg-purple-red-gradient a.button--download.button--secondary:hover::after,
.bg-red-gradient button.button--download.button--secondary:hover::after,
.bg-red-gradient a.button--download.button--secondary:hover::after {
  background-image: url("../../img/icons/icon--download-red.svg");
}

.bg-pure-black .button--secondary {
  color: #fff;
}
.bg-pure-black .button--arrow {
  background-image: url("../../img/icons/arrows/arrow--right-white.svg");
}

/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== FORMS ====

    Component description:
        Form elements.

    Modificators:
        No modificators.
*/
input {
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1.6rem;
  line-height: 1.6rem;
  background-color: transparent;
  border: none;
  border-color: #e0e5e8;
  border-bottom: 1px solid #e0e5e8;
  color: #3c484e;
  padding: 20px;
  outline: none;
  width: 100%;
}
input::-moz-placeholder {
  opacity: 1;
  color: #8b969b;
}
input::placeholder {
  opacity: 1;
  color: #8b969b;
}
input:-ms-input-placeholder {
  color: #8b969b;
}
input::-ms-input-placeholder {
  color: #8b969b;
}

.input-wrapper {
  position: relative;
  margin-top: 45px;
}
.input-wrapper:not(.hide-decoration)::before, .input-wrapper:not(.g-recaptcha)::before {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  position: absolute;
  background-color: #60308e;
  bottom: 0;
  left: 0;
}
.input-wrapper input {
  padding-top: 55px;
  margin-bottom: 0;
  margin: 0;
}
.input-wrapper input:focus {
  border-bottom: 1px solid #60308e;
}
.input-wrapper label {
  color: #60308e;
  text-transform: uppercase;
  font-size: 1.8rem;
  position: absolute;
  top: 0;
  left: 0;
}
.input-wrapper label span {
  font-size: 2rem;
  transform: translateY(2px);
}
.input-wrapper + .input-wrapper {
  margin-top: 45px;
}

textarea {
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1.6rem;
  line-height: 2.4rem;
  border: 1px solid #e0e5e8;
  background-color: transparent;
  white-space: pre-line;
  resize: none;
  color: #3c484e;
  padding: 10px 18px 7.5px 18px;
  outline: none;
  width: 100%;
  height: 100px;
  margin-top: 40px;
  position: relative;
}
textarea:focus {
  border: 1px solid #60308e;
}

.input-wrapper {
  position: relative;
}
.input-wrapper.search input {
  padding-right: 50px;
  width: 100%;
}
.input-wrapper.search .search-button {
  content: "";
  display: block;
  width: 18px;
  height: 19px;
  position: absolute;
  padding: 0;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.input-wrapper.textarea {
  font-size: 0;
}
.input-wrapper.textarea::before {
  bottom: 1px;
  z-index: 1;
}

.bg-purple input,
.bg-purple textarea {
  color: #fff;
}
.bg-purple input:focus,
.bg-purple textarea:focus {
  border-color: #fff;
}
.bg-purple .input-wrapper::before {
  background-color: #FFFFFF;
}
.bg-purple .input-wrapper label {
  color: #FFFFFF;
}

.bg-red input,
.bg-red textarea {
  color: #fff;
}
.bg-red input:focus,
.bg-red textarea:focus {
  border-color: #fff;
}
.bg-red .input-wrapper::before {
  background-color: #FFFFFF;
}
.bg-red .input-wrapper label {
  color: #FFFFFF;
}

.bg-pure-black input,
.bg-pure-black textarea {
  color: #fff;
}

select.custom-select {
  display: none;
}

.choices {
  color: #3c484e;
}
.choices .choices__item {
  color: #60308e;
  padding: 10px !important;
  line-height: 16px;
}
.choices .choices__item.choices__placeholder {
  color: #60308e;
  padding: 0 !important;
}
.choices .choices__list.choices__list--dropdown .choices__item,
.choices .choices__list.choices__list--dropdown .choices__item.choices__placeholder {
  padding: 10px !important;
}
.choices .choices__list.choices__list--single .choices__item {
  padding: 0 !important;
}
.choices .choices__list--single {
  padding-right: 25px;
  min-width: 80px;
}
.choices .choices__inner {
  padding: 0 !important;
  min-height: unset;
}
.choices[data-type*=select-one]::after {
  background-image: url("../../img/icons/arrows/arrow--dropdown-white.svg");
  background-repeat: no-repeat;
  width: 13px;
  height: 11px;
  background-size: contain;
  border: none;
  background-position: center;
  transition: 0.2s ease;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  margin: 0 !important;
}
.choices[data-type*=select-one].is-open::after {
  margin: 0;
  transform: translateY(-50%) rotate(180deg);
  transition: 0.2s ease;
}
.choices.is-open .choices__list--dropdown, .choices.is-open .choices__list[aria-expanded] {
  border-color: #cecece;
}
.choices .choices__list--dropdown,
.choices .choices__list[aria-expanded] {
  border-radius: 0;
}

.search-and-select .choices::after {
  background-image: url("../../img/icons/arrows/arrow--dropdown-grey.svg");
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  pointer-events: none;
}

/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== SECTION TITLE ====

    Component description:
        Section title.

    Modificators:
        No modificators.
*/
.heading .title {
  margin-bottom: 40px;
}
.heading .title h1,
.heading .title h2,
.heading .title h3,
.heading .title h4,
.heading .title h5,
.heading .title h6 {
  margin-top: 0;
  margin-bottom: 0;
}
.heading .title:last-child {
  margin-bottom: 0;
}
.heading .subtitle {
  font-size: 2.8rem;
  line-height: 4.2rem;
}
.heading .subtitle p {
  margin-top: 0;
  font-size: inherit;
}
.heading .subtitle p:last-child {
  margin-bottom: 0;
}
.heading .title.line-decoration h1,
.heading .title.line-decoration h2,
.heading .title.line-decoration h3,
.heading .title.line-decoration h4,
.heading .title.line-decoration h5,
.heading .title.line-decoration h6 {
  position: relative;
  padding-bottom: 35px;
}
.heading .title.line-decoration h1::before,
.heading .title.line-decoration h2::before,
.heading .title.line-decoration h3::before,
.heading .title.line-decoration h4::before,
.heading .title.line-decoration h5::before,
.heading .title.line-decoration h6::before {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  position: absolute;
  background-color: #60308e;
  display: inline-block;
  left: 0;
  bottom: 0;
}

.heading.text-center .title.line-decoration h1::before,
.heading.text-center .title.line-decoration h2::before,
.heading.text-center .title.line-decoration h3::before,
.heading.text-center .title.line-decoration h4::before,
.heading.text-center .title.line-decoration h5::before,
.heading.text-center .title.line-decoration h6::before,
.text-center .heading .title.line-decoration h1::before,
.text-center .heading .title.line-decoration h2::before,
.text-center .heading .title.line-decoration h3::before,
.text-center .heading .title.line-decoration h4::before,
.text-center .heading .title.line-decoration h5::before,
.text-center .heading .title.line-decoration h6::before {
  left: 50%;
  transform: translateX(-50%);
}

.heading.text-right .title.line-decoration h1::before,
.heading.text-right .title.line-decoration h2::before,
.heading.text-right .title.line-decoration h3::before,
.heading.text-right .title.line-decoration h4::before,
.heading.text-right .title.line-decoration h5::before,
.heading.text-right .title.line-decoration h6::before,
.text-right .heading .title.line-decoration h1::before,
.text-right .heading .title.line-decoration h2::before,
.text-right .heading .title.line-decoration h3::before,
.text-right .heading .title.line-decoration h4::before,
.text-right .heading .title.line-decoration h5::before,
.text-right .heading .title.line-decoration h6::before {
  left: unset;
  right: 0;
}

.text-black .heading .title.line-decoration h1::before,
.text-black .heading .title.line-decoration h2::before,
.text-black .heading .title.line-decoration h3::before,
.text-black .heading .title.line-decoration h4::before,
.text-black .heading .title.line-decoration h5::before,
.text-black .heading .title.line-decoration h6::before {
  background-color: #60308e !important;
}

.bg-purple .heading .title.line-decoration h1::before,
.bg-purple .heading .title.line-decoration h2::before,
.bg-purple .heading .title.line-decoration h3::before,
.bg-purple .heading .title.line-decoration h4::before,
.bg-purple .heading .title.line-decoration h5::before,
.bg-purple .heading .title.line-decoration h6::before,
.bg-purple-gradient .heading .title.line-decoration h1::before,
.bg-purple-gradient .heading .title.line-decoration h2::before,
.bg-purple-gradient .heading .title.line-decoration h3::before,
.bg-purple-gradient .heading .title.line-decoration h4::before,
.bg-purple-gradient .heading .title.line-decoration h5::before,
.bg-purple-gradient .heading .title.line-decoration h6::before,
.bg-red .heading .title.line-decoration h1::before,
.bg-red .heading .title.line-decoration h2::before,
.bg-red .heading .title.line-decoration h3::before,
.bg-red .heading .title.line-decoration h4::before,
.bg-red .heading .title.line-decoration h5::before,
.bg-red .heading .title.line-decoration h6::before,
.bg-red-purple-gradient .heading .title.line-decoration h1::before,
.bg-red-purple-gradient .heading .title.line-decoration h2::before,
.bg-red-purple-gradient .heading .title.line-decoration h3::before,
.bg-red-purple-gradient .heading .title.line-decoration h4::before,
.bg-red-purple-gradient .heading .title.line-decoration h5::before,
.bg-red-purple-gradient .heading .title.line-decoration h6::before,
.bg-purple-red-gradient .heading .title.line-decoration h1::before,
.bg-purple-red-gradient .heading .title.line-decoration h2::before,
.bg-purple-red-gradient .heading .title.line-decoration h3::before,
.bg-purple-red-gradient .heading .title.line-decoration h4::before,
.bg-purple-red-gradient .heading .title.line-decoration h5::before,
.bg-purple-red-gradient .heading .title.line-decoration h6::before,
.bg-red-gradient .heading .title.line-decoration h1::before,
.bg-red-gradient .heading .title.line-decoration h2::before,
.bg-red-gradient .heading .title.line-decoration h3::before,
.bg-red-gradient .heading .title.line-decoration h4::before,
.bg-red-gradient .heading .title.line-decoration h5::before,
.bg-red-gradient .heading .title.line-decoration h6::before,
.text-white .heading .title.line-decoration h1::before,
.text-white .heading .title.line-decoration h2::before,
.text-white .heading .title.line-decoration h3::before,
.text-white .heading .title.line-decoration h4::before,
.text-white .heading .title.line-decoration h5::before,
.text-white .heading .title.line-decoration h6::before {
  background-color: #fff;
}

@media (max-width: 575px) {
  .heading .title h1,
  .heading .title h2,
  .heading .title h3,
  .heading .title h4,
  .heading .title h5,
  .heading .title h6 {
    font-size: 3.8rem;
    line-height: 3.8rem;
  }
  .heading .subtitle {
    font-size: 2rem;
    line-height: 2rem;
  }
}
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== SLIDER ====

    Component description: 
        Slider specifics, override default swiper.css styles.

    Modificators:
        No modificators.

*/
.swiper-pagination-bullet {
  background-color: #fff;
  width: 15px;
  height: 15px;
  margin-right: 20px !important;
  opacity: 1;
  outline: none;
}
.swiper-pagination-bullet:last-child {
  margin-right: 0 !important;
}

.swiper-pagination-bullet-active {
  background-color: #60308e;
}

.swiper-pagination {
  bottom: 150px !important;
  left: 10px !important;
  width: auto !important;
}

.page-header.hero > .wrapper {
  position: relative;
}
.page-header.hero .swiper.swiper-one-slide .container-fluid {
  height: auto !important;
}

.swiper-button-lock {
  display: none !important;
}

.slider-controls {
  display: flex;
}
.slider-controls .slider-control.slider-control--next {
  margin-left: 25px;
}

.slider-control {
  background-position: 55% center;
}
.slider-control.slider-control--prev {
  transform: rotate(180deg);
}

/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== POPUP ====

    Component description:
        This is popup component.

    Modificators:

    1. Team member

        Description:             Team member popup
        Hook element selector:   .popup
        Selector to add:         #team-member
*/
.popup {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  width: 100%;
  height: 100dvh;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.popup::-webkit-scrollbar {
  display: none;
}
.popup.active {
  display: block;
}
.popup .popup-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.5;
  z-index: -1;
  height: 100%;
  width: 100%;
}
.popup .popup__inner {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 800px;
  max-width: 100%;
  margin: 100px auto;
  z-index: 50;
  background-color: #FFFFFF;
  padding: 40px;
  box-shadow: 0px 13px 65px 0px rgba(0, 0, 0, 0.15);
}
.popup .close-popup-wrapper {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  z-index: 1;
}
.popup button.close-popup {
  padding: 0;
  background-image: url("../../img/icons/icon--close.svg");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: center;
  width: 18px;
  height: 18px;
  padding: 10px;
  font-size: 0;
  line-height: 0;
  box-sizing: content-box;
}
.popup .os-scrollbar .os-scrollbar-handle {
  width: 5px;
  margin-right: -2px;
}
.popup .os-scrollbar .os-scrollbar-track {
  background-color: #b5b5b5;
  width: 1px;
}
.popup .social a {
  transition: 0.2s ease;
}
.popup .social a:hover {
  transition: 0.2s ease;
  opacity: 0.6;
}

.popup#team-member-popup .popup__inner {
  display: grid;
  grid-template-columns: 260px auto;
  padding: 0;
}
.popup#team-member-popup .information {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f4;
  background-repeat: no-repeat;
  background-position-y: calc(100% - 70px);
  background-position-x: center;
}
.popup#team-member-popup .information .information__inner {
  padding: 40px 30px 0 30px;
  margin-bottom: 100px;
}
.popup#team-member-popup .information .name {
  margin-bottom: 15px;
}
.popup#team-member-popup .information .name h1,
.popup#team-member-popup .information .name h2,
.popup#team-member-popup .information .name h3,
.popup#team-member-popup .information .name h4,
.popup#team-member-popup .information .name h5,
.popup#team-member-popup .information .name h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.2rem;
  line-height: 2.8rem;
  padding-bottom: 20px;
  position: relative;
}
.popup#team-member-popup .information .name h1::before,
.popup#team-member-popup .information .name h2::before,
.popup#team-member-popup .information .name h3::before,
.popup#team-member-popup .information .name h4::before,
.popup#team-member-popup .information .name h5::before,
.popup#team-member-popup .information .name h6::before {
  content: "";
  display: block;
  width: 50px;
  height: 1px;
  position: absolute;
  background-color: #60308e;
  display: inline-block;
  left: 0;
  bottom: 0;
}
.popup#team-member-popup .information .position {
  font-size: 1.6rem;
}
.popup#team-member-popup .description {
  padding: 40px 30px 40px 55px;
  font-size: 1.6rem;
  color: #808080;
}
.popup#team-member-popup .description .description__inner {
  max-height: 500px;
  overflow-x: hidden;
  padding-right: 30px;
  margin-top: 50px;
}
.popup#team-member-popup .description .text p {
  font-size: inherit;
  color: inherit;
  margin-top: 0;
}
.popup#team-member-popup .description .text p:last-child {
  margin-bottom: 0;
}
.popup#team-member-popup .image {
  margin-top: auto;
  font-size: 0;
}

.page-wrapper.popup-active {
  filter: blur(10px);
  overflow: hidden;
}

.open-popup {
  cursor: pointer;
}

@media (max-width: 665px) {
  .popup#team-member-popup .popup__inner {
    grid-template-columns: 1fr;
    margin: 0;
    min-height: 100dvh;
  }
  .popup#team-member-popup .image {
    display: flex;
    justify-content: center;
  }
  .popup#team-member-popup .description .description__inner {
    max-height: none;
    padding-right: 0;
  }
}
@media (min-width: 576px) {
  .popup#team-member-popup .container {
    max-width: 800px;
  }
}
@media (max-width: 575px) {
  .popup#team-member-popup .popup__inner {
    grid-template-columns: 1fr;
    margin: 0;
    min-height: 100dvh;
  }
  .popup#team-member-popup .container,
  .popup#team-member-popup .container-fluid {
    margin: 0;
    padding: 0;
  }
  .popup#team-member-popup .description {
    padding: 40px;
  }
  .popup#team-member-popup .image {
    display: flex;
    justify-content: center;
  }
  .popup#team-member-popup .description .description__inner {
    max-height: none;
    padding-right: 0;
  }
}
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== SCROLLBAR ====

    Component description:
        Custom scrollbar.

    Modificators:
        No modificators.
*/
.os-scrollbar .os-scrollbar-handle {
  background-color: #60308e;
  border-radius: 0;
  cursor: grab;
}

/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== SIDEBAR ====

    Component description:
        Website sidebar.

    Modificators:
        No modificators.
*/
.single-with-sidebar .single-with-sidebar-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.single-with-sidebar .single-with-sidebar-wrapper .content {
  flex: 2;
}
.single-with-sidebar .single-with-sidebar-wrapper .sidebar {
  flex: 1;
  margin-left: 100px;
  padding-top: 70px;
}
.single-with-sidebar .single-with-sidebar-wrapper .left-sidebar {
  order: -1;
  margin-right: 100px;
  margin-left: 0;
}

.sidebar {
  padding-right: 45px;
  max-width: 342px;
}
.sidebar.with-border {
  padding-top: 70px;
  border-top: 1px solid #e0e5e8;
}
.sidebar .title {
  margin-bottom: 30px;
  margin-top: 50px;
}
.sidebar .title:first-child {
  margin-top: 0;
}
.sidebar .title h1,
.sidebar .title h2,
.sidebar .title h3,
.sidebar .title h4,
.sidebar .title h5,
.sidebar .title h6 {
  font-size: 2.8rem;
  line-height: 3.2rem;
  margin-top: 0;
  margin-bottom: 0;
}
.sidebar ul,
.sidebar ol {
  padding-left: 15px;
}
.sidebar ul li,
.sidebar ol li {
  padding-left: 5px;
}
.sidebar ul li:not(:last-child),
.sidebar ol li:not(:last-child) {
  margin-bottom: 15px;
}
.sidebar .news-list {
  margin-top: 40px;
}
.sidebar .news-list .news-list__title {
  margin-bottom: 30px;
}
.sidebar .news-list .news-list__title h1,
.sidebar .news-list .news-list__title h2,
.sidebar .news-list .news-list__title h3,
.sidebar .news-list .news-list__title h4,
.sidebar .news-list .news-list__title h5,
.sidebar .news-list .news-list__title h6 {
  font-size: 2.8rem;
  line-height: 3.2rem;
  margin-top: 0;
  margin-bottom: 0;
}
.sidebar .news-list .news:not(:last-child) {
  margin-bottom: 30px;
}
.sidebar .news-list .news .news__title {
  margin-bottom: 5px;
}
.sidebar .news-list .news .news__title h1,
.sidebar .news-list .news .news__title h2,
.sidebar .news-list .news .news__title h3,
.sidebar .news-list .news .news__title h4,
.sidebar .news-list .news .news__title h5,
.sidebar .news-list .news .news__title h6 {
  margin-top: 0;
  margin-bottom: 0;
  color: #60308e;
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  font-size: 2rem;
  line-height: 2.4rem;
  font-weight: normal;
}
.sidebar .news-list .news .news__title h1 a,
.sidebar .news-list .news .news__title h2 a,
.sidebar .news-list .news .news__title h3 a,
.sidebar .news-list .news .news__title h4 a,
.sidebar .news-list .news .news__title h5 a,
.sidebar .news-list .news .news__title h6 a {
  color: #60308e;
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  font-size: 2rem;
  line-height: 2.4rem;
  font-weight: normal;
}
.sidebar .news-list .news .news__text p {
  margin-top: 0;
  font-size: 1.6rem;
  line-height: 2.4rem;
}
.sidebar .news-list .news .news__text p:last-child {
  margin-bottom: 0;
}
.sidebar .news-list .news .news__date {
  font-size: 1.4rem;
  text-transform: uppercase;
  margin-top: 15px;
}
.sidebar .input-wrapper::before {
  content: none;
}
.sidebar input {
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1.6rem;
  line-height: 2.4rem;
  border: 1px solid #e0e5e8;
  background-color: transparent;
  color: #3c484e;
  padding: 7.5px 18px;
  outline: none;
}
.sidebar input::-moz-placeholder {
  opacity: 1;
  color: #3c484e;
}
.sidebar input::placeholder {
  opacity: 1;
  color: #3c484e;
}
.sidebar input:-ms-input-placeholder {
  color: #3c484e;
}
.sidebar input::-ms-input-placeholder {
  color: #3c484e;
}
.sidebar input:focus {
  border: 1px solid #60308e;
}

/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== BREADCRUMBS ====

    Component description:
        Website breadcrumbs.

    Modificators:
        No modificators.
*/
.breadcrumbs {
  margin-bottom: 70px;
}
.breadcrumbs ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 0;
}
.breadcrumbs ul li {
  list-style: none;
  padding: 0 20px;
  position: relative;
  font-size: 1.6rem;
  margin-bottom: 0;
}
.breadcrumbs ul li a {
  font-size: inherit;
}
.breadcrumbs ul li::before {
  content: "";
  display: block;
  background-color: #c9ced1;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 32px;
  width: 1px;
}
.breadcrumbs ul li:first-child {
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  padding-left: 0;
}
.breadcrumbs ul li:first-child a {
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
}
.breadcrumbs ul li:first-child::before {
  content: none;
}
.breadcrumbs ul li:last-child {
  padding-right: 0;
}
.breadcrumbs ul li:not(:first-child) {
  color: #3c484e;
}
.breadcrumbs ul li:not(:first-child) a {
  pointer-events: none;
  color: #3c484e;
}

.breadcrumbs-wrapper {
  margin-bottom: 70px;
}
.breadcrumbs-wrapper:last-child {
  margin-bottom: 0;
}
.breadcrumbs-wrapper ul.breadcrumbs {
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 0;
}
.breadcrumbs-wrapper ul.breadcrumbs li {
  list-style: none;
  padding: 0 20px;
  position: relative;
  font-size: 1.6rem;
  margin-bottom: 0;
}
.breadcrumbs-wrapper ul.breadcrumbs li a {
  font-size: inherit;
}
.breadcrumbs-wrapper ul.breadcrumbs li::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.breadcrumbs-wrapper ul.breadcrumbs li:first-child {
  padding-left: 0;
}
.breadcrumbs-wrapper ul.breadcrumbs li:first-child::before {
  content: none;
}
.breadcrumbs-wrapper ul.breadcrumbs li:last-child {
  padding-right: 0;
}

/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== AUTHOR AND SOCIALS ====

    Component description:
        Author and socials.

    Modificators:
        No modificators.
*/
.author-and-socials {
  border-top: 1px solid #e0e5e8;
  border-bottom: 1px solid #e0e5e8;
  margin-top: 100px;
}
.author-and-socials .author-and-socials__inner {
  padding: 15px 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -moz-column-gap: 50px;
       column-gap: 50px;
  flex-wrap: wrap;
}
.author-and-socials .author {
  font-size: 1.5rem;
  font-family: "primary-italic", Arial, Helvetica, sans-serif;
}
.author-and-socials .socials {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  margin-right: -20px;
}
.author-and-socials .socials .socials__label {
  display: inline-block;
  margin-right: 10px;
}
.author-and-socials .socials .social__icons {
  display: flex;
  align-items: center;
}
.author-and-socials .socials .social__icons .social-media a {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 13px;
  transition: 0.2s ease;
}
.author-and-socials .socials .social__icons .social-media a:hover {
  opacity: 0.7;
  transition: 0.2s ease;
}
.author-and-socials .socials .social__icons .social-media img {
  max-height: 15px;
  min-width: 8px;
}
.author-and-socials .socials .social__icons .social-media:last-child {
  margin-right: 0;
}

@media (max-width: 767px) {
  .author-and-socials .author-and-socials__inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== PAGINATION ====

    Component description:
        Website pagination.

    Modificators:
        No modificators.
*/
.pagination {
  padding: 0 0 150px 0;
}
.pagination .pagination__inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination .pagination__inner ul {
  display: inline-flex;
  padding: 0;
  margin: 0;
}
.pagination .pagination__inner ul li {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0;
}
.pagination .pagination__inner ul li a,
.pagination .pagination__inner ul li span {
  display: inline-block;
  padding: 15px 20px;
  font-size: 1.8rem;
  line-height: 1.8rem;
  transition: 0.2s ease;
  min-width: 52px;
  text-align: center;
}
.pagination .pagination__inner ul li a:hover,
.pagination .pagination__inner ul li span:hover {
  text-decoration: none;
}
.pagination .pagination__inner ul li.active {
  border-bottom: 1px solid #60308e;
}
.pagination .pagination__inner ul li.active a {
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
}
.pagination .pagination__inner ul li:not(.active) a {
  color: #3c484e;
}
.pagination .pagination__inner ul li:not(.active) a:hover {
  background-color: #e0e5e8;
  transition: 0.2s ease;
}
.pagination .pagination__inner .pagination-control {
  display: inline-block;
  padding: 15px 20px;
  transition: 0.2s ease;
}
.pagination .pagination__inner .pagination-control:hover {
  background-color: #e0e5e8;
  transition: 0.2s ease;
}
.pagination .pagination__inner .pagination-control img {
  width: 11px;
  height: 16px;
  max-width: unset;
}
.pagination .pagination__inner .pagination-control.prev {
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  .pagination, .pagination.padding-top-0, .pagination.padding-top-50, .pagination.padding-top-100, .pagination.padding-top-150, .pagination.padding-top-200 {
    padding-top: 100px !important;
  }
  .pagination, .pagination.padding-bottom-0, .pagination.padding-bottom-50, .pagination.padding-bottom-100, .pagination.padding-bottom-150, .pagination.padding-bottom-200 {
    padding-bottom: 100px !important;
  }
}
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== GALLERY ====

    Component description:
        Website gallery.

    Modificators:
        No modificators.
*/
.gallery .main-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 700px;
  height: 520px;
  border: 1px solid #e0e5e8;
}
.gallery .main-image-wrapper img {
  max-height: 100%;
}
.gallery .main-image-wrapper > a {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery .images-list {
  display: flex;
  max-width: 700px;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.gallery .images-list::-webkit-scrollbar {
  display: none;
}
.gallery .images-list .images-list__image {
  width: 100px;
  height: 100px;
  border: 1px solid #e0e5e8;
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 100px;
}
.gallery .images-list .images-list__image.active-image {
  border: 2px solid #60308e !important;
}
.gallery .images-list .images-list__image:not(.active-image):hover {
  border: 2px solid #e0e5e8 !important;
  padding: 2px;
}
.gallery .images-list .images-list__image:not(:last-child) {
  border-right: none;
}
.gallery .images-list .images-list__image a[data-fslightbox] {
  font-size: 0;
  line-height: 0;
}
.gallery .os-viewport {
  display: flex;
}
.gallery .os-scrollbar {
  padding: 0;
  height: 4px;
}
.gallery .os-scrollbar-track {
  background: #ececec;
}

@media (max-width: 767px) {
  .gallery .main-image-wrapper {
    width: 100%;
    height: auto;
  }
}
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== TABS ====

    Component description:
        Tabs component.

    Modificators:
        No modificators.
*/
.tabs .tabs-item {
  display: none;
}
.tabs .tabs-item.active-tab-item {
  display: block;
}
.tabs .tabs-list__item.active-tab-button {
  color: #60308e;
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
}
.tabs .tabs-control {
  display: none;
  padding: 0;
  width: 30px;
  height: 30px;
  background-image: url("../../img/icons/arrows/arrow--right-purple.svg");
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: center;
}
.tabs .tabs-control.tabs-control--prev {
  transform: rotate(180deg);
}
.tabs .tabs-control.active {
  display: block;
}

/* 
	==== Page specifics ==== 
*/
/*
    File Name: _page-specifics.scss

    Description:
    This is the page specifics SCSS file that imports styles realted to specific page.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    File Name: _variables.scss

    Description:
    This is the variables SCSS file that imports all variables that are used all over project.

    Note:
    This file should not contain any actual CSS styles. Its purpose is to
    bring together all the variables that are used accros project.
    Any direct styles added to this file may be overridden by the imported files.

*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

    Modificators:
        No modificators.

*/
/*
    ==== FONT.VARIABLES ====

    Description:
        All variables related to fonts.

    Modificators:
        No modificators.

*/
/*
    ==== INDEX ====

    Description:
        Styles related specificly to index page.

    Modificators:
        No modificators.
*/
.test {
  color: red;
}

/* 
	==== Spacings ==== 
*/
/*
    ==== SPACING ====

    Description:
        List of all aviailable spacings (padding and margin) accross the website.

    Modificators:
        No modificators.
*/
.padding-0 {
  padding: 0 !important;
}

.padding-top-0 {
  padding-top: 0 !important;
}

.padding-bottom-0 {
  padding-bottom: 0 !important;
}

.padding-top-10 {
  padding-top: 10px !important;
}

.padding-bottom-10 {
  padding-bottom: 10px !important;
}

.padding-top-20 {
  padding-top: 20px !important;
}

.padding-bottom-20 {
  padding-bottom: 20px !important;
}

.padding-top-30 {
  padding-top: 30px !important;
}

.padding-bottom-30 {
  padding-bottom: 30px !important;
}

.padding-top-40 {
  padding-top: 40px !important;
}

.padding-bottom-40 {
  padding-bottom: 40px !important;
}

.padding-top-50 {
  padding-top: 50px !important;
}

.padding-bottom-50 {
  padding-bottom: 50px !important;
}

.padding-top-60 {
  padding-top: 60px !important;
}

.padding-bottom-60 {
  padding-bottom: 60px !important;
}

.padding-top-70 {
  padding-top: 70px !important;
}

.padding-bottom-70 {
  padding-bottom: 70px !important;
}

.padding-top-80 {
  padding-top: 80px !important;
}

.padding-bottom-80 {
  padding-bottom: 80px !important;
}

.padding-top-90 {
  padding-top: 90px !important;
}

.padding-bottom-90 {
  padding-bottom: 90px !important;
}

.padding-top-100 {
  padding-top: 100px !important;
}

.padding-bottom-100 {
  padding-bottom: 100px !important;
}

.padding-top-110 {
  padding-top: 110px !important;
}

.padding-bottom-110 {
  padding-bottom: 110px !important;
}

.padding-top-120 {
  padding-top: 120px !important;
}

.padding-bottom-120 {
  padding-bottom: 120px !important;
}

.padding-top-130 {
  padding-top: 130px !important;
}

.padding-bottom-130 {
  padding-bottom: 130px !important;
}

.padding-top-140 {
  padding-top: 140px !important;
}

.padding-bottom-140 {
  padding-bottom: 140px !important;
}

.padding-top-150 {
  padding-top: 150px !important;
}

.padding-bottom-150 {
  padding-bottom: 150px !important;
}

.padding-top-160 {
  padding-top: 160px !important;
}

.padding-bottom-160 {
  padding-bottom: 160px !important;
}

.padding-top-170 {
  padding-top: 170px !important;
}

.padding-bottom-170 {
  padding-bottom: 170px !important;
}

.padding-top-180 {
  padding-top: 180px !important;
}

.padding-bottom-180 {
  padding-bottom: 180px !important;
}

.padding-top-190 {
  padding-top: 190px !important;
}

.padding-bottom-190 {
  padding-bottom: 190px !important;
}

.padding-top-200 {
  padding-top: 200px !important;
}

.padding-bottom-200 {
  padding-bottom: 200px !important;
}

.margin-0 {
  margin: 0 !important;
}

.margin-top-0 {
  margin-top: 0 !important;
}

.margin-bottom-0 {
  margin-bottom: 0 !important;
}

.margin-top-10 {
  margin-top: 10px !important;
}

.margin-bottom-10 {
  margin-bottom: 10px !important;
}

.margin-top-20 {
  margin-top: 20px !important;
}

.margin-bottom-20 {
  margin-bottom: 20px !important;
}

.margin-top-30 {
  margin-top: 30px !important;
}

.margin-bottom-30 {
  margin-bottom: 30px !important;
}

.margin-top-40 {
  margin-top: 40px !important;
}

.margin-bottom-40 {
  margin-bottom: 40px !important;
}

.margin-top-50 {
  margin-top: 50px !important;
}

.margin-bottom-50 {
  margin-bottom: 50px !important;
}

.margin-top-60 {
  margin-top: 60px !important;
}

.margin-bottom-60 {
  margin-bottom: 60px !important;
}

.margin-top-70 {
  margin-top: 70px !important;
}

.margin-bottom-70 {
  margin-bottom: 80px !important;
}

.margin-top-80 {
  margin-top: 80px !important;
}

.margin-bottom-80 {
  margin-bottom: 90px !important;
}

.margin-top-90 {
  margin-top: 90px !important;
}

.margin-bottom-90 {
  margin-bottom: 90px !important;
}

.margin-top-100 {
  margin-top: 100px !important;
}

.margin-bottom-100 {
  margin-bottom: 100px !important;
}

.margin-top-110 {
  margin-top: 110px !important;
}

.margin-bottom-110 {
  margin-bottom: 110px !important;
}

.margin-top-120 {
  margin-top: 120px !important;
}

.margin-bottom-120 {
  margin-bottom: 120px !important;
}

.margin-top-130 {
  margin-top: 130px !important;
}

.margin-bottom-130 {
  margin-bottom: 130px !important;
}

.margin-top-140 {
  margin-top: 140px !important;
}

.margin-bottom-140 {
  margin-bottom: 140px !important;
}

.margin-top-150 {
  margin-top: 150px !important;
}

.margin-bottom-150 {
  margin-bottom: 150px !important;
}

.margin-top-160 {
  margin-top: 160px !important;
}

.margin-bottom-160 {
  margin-bottom: 160px !important;
}

.margin-top-170 {
  margin-top: 170px !important;
}

.margin-bottom-170 {
  margin-bottom: 170px !important;
}

.margin-top-180 {
  margin-top: 180px !important;
}

.margin-bottom-180 {
  margin-bottom: 180px !important;
}

.margin-top-190 {
  margin-top: 190px !important;
}

.margin-bottom-190 {
  margin-bottom: 190px !important;
}

.margin-top-200 {
  margin-top: 200px !important;
}

.margin-bottom-200 {
  margin-bottom: 200px !important;
}