/*
    Project: Prava Interpretatora
    Developed by: Eximius-Solutions

    Table of content:
    01. Colors
    02. Background colors
    03. Fonts
    04. Globals
    05. Partials
    06. Components
    07. Spacings
*/
/* 
	==== Colors ==== 
*/
/*
    ==== COLORS.VARIABLES ====

    Description:
        All variables related to colors.

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

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

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

.text-color-grey {
  color: #7C7C7C;
}

.text-color-dark-red {
  color: #AA182C;
}

.text-color-dark-blue {
  color: #002A95;
}

/* 
    ==== 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-black {
  background-color: #131313;
}

.bg-dark-red {
  background-color: #AA182C;
}

.bg-light-gray {
  background-color: #fafafa;
}

.bg-image {
  width: 100%;
  height: 100%;
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
  max-width: unset;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* 
	==== 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/primary/Montserrat-Regular.woff2");
  font-display: swap;
}
@font-face {
  font-family: "primary-medium";
  src: url("../../fonts/primary/Montserrat-Medium.woff2");
  font-display: swap;
}
@font-face {
  font-family: "primary-semi-bold";
  src: url("../../fonts/primary/Montserrat-SemiBold.woff2");
  font-display: swap;
}
@font-face {
  font-family: "primary-bold";
  src: url("../../fonts/primary/Montserrat-Bold.woff2");
  font-display: swap;
}
@font-face {
  font-family: "secondary-medium";
  src: url("../../fonts/secondary/OpenSans-Medium.woff2");
  font-display: swap;
}
@font-face {
  font-family: "secondary-semi-bold";
  src: url("../../fonts/secondary/OpenSans-SemiBold.woff2");
  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.6rem;
}

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

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

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

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

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

/* 
	==== 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%;
  font-feature-settings: "locl" 0;
}

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

html.screen-locked {
  overflow-y: hidden;
  padding-right: var(--scrollbarWidth, 17px);
}
html.screen-locked header,
html.screen-locked .preheader {
  padding-right: var(--scrollbarWidth, 17px);
}

body {
  margin: 0;
  padding: 0;
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  color: #131313;
  padding-top: calc(var(--headerHeight, 84px) + var(--preheaderHeight, 56px));
  overflow-x: hidden;
}

h1 {
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 5.6rem;
  line-height: 6.4rem;
  margin-top: 70px;
  margin-bottom: 48px;
}

h2 {
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 5.6rem;
  line-height: 6.4rem;
  margin-top: 70px;
  margin-bottom: 48px;
}

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

h4 {
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 2rem;
  line-height: 3.2rem;
  margin-top: 40px;
  margin-bottom: 25px;
}

h5 {
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1.8rem;
  line-height: 2rem;
  margin-top: 30px;
  margin-bottom: 20px;
}

h6 {
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1.6rem;
  line-height: 1.8rem;
  margin-top: 20px;
  margin-bottom: 12px;
}

a {
  color: #B50019;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a[href^=mailto] {
  word-break: break-all;
}

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

label {
  font-size: 1.6rem;
  line-height: 2.2rem;
  display: block;
}
label + input, label + textarea, label + .input-wrapper__inner {
  margin-top: 8px;
}

fieldset {
  padding: 7px 15px 15px 15px;
  margin-left: 0;
  margin-right: 0;
  border: 1px solid #D6D3D1;
}
fieldset:not(:last-child) {
  margin-bottom: 16px;
}
fieldset legend {
  font-size: 1.4rem;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
p:first-child,
a:first-child,
ul:first-child,
ol:first-child {
  margin-top: 0;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child,
a:last-child,
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

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

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

ul {
  padding-left: 15px;
}
ul li {
  margin-bottom: 12px;
  list-style-position: inside;
}
ul li:last-child {
  margin-bottom: 0;
}
ul li::marker {
  color: #171717;
  font-size: 1rem;
}
ul.tick-list {
  padding-left: 0;
}
ul.tick-list li {
  position: relative;
  padding-left: 32px;
  list-style: none;
  line-height: 2.6rem;
}
ul.tick-list li::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("../../img/icons/tick--red.webp");
  background-size: 16px 12px;
  background-position: center;
  background-repeat: no-repeat;
}
ul.download-list {
  padding-left: 0;
}
ul.download-list li {
  position: relative;
  padding-left: 32px;
  list-style: none;
  line-height: 2.6rem;
}
ul.download-list li::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("../../img/icons/download--red-v2.webp");
  background-size: 15px 15px;
  background-position: center;
  background-repeat: no-repeat;
}
ul.list-of-urls:empty, ul.list-of-documents:empty {
  padding: 0;
  margin: 0;
}

ol {
  padding-left: 15px;
}
ol li {
  margin-bottom: 12px;
  list-style-position: inside;
}
ol li:last-child {
  margin-bottom: 0;
}
ol li::marker {
  color: #171717;
}

#urls-and-document_error {
  color: rgb(176, 0, 32);
  font-size: 1.4rem;
}

blockquote {
  display: inline-block;
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background-color: #F5F5F4;
  color: #171717;
  font-size: 1.8rem;
  line-height: 2.8rem;
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
}

table {
  border-collapse: collapse;
}
table thead {
  border-bottom: 1px solid #E7E5E4;
  margin-bottom: 6px;
}
table tbody tr:nth-child(even) {
  background-color: #F5F5F4;
}
table th {
  font-size: 1.3rem;
  color: rgba(23, 23, 23, 0.6980392157);
  text-align: center;
  line-height: 1.8rem;
  font-weight: normal;
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  padding: 4px 8px;
}
table tr td.text-left:first-child {
  padding-left: 8px;
}
table td {
  text-align: center;
  font-size: 1.4rem;
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  line-height: 1.8rem;
  padding: 6px 20px;
  white-space: initial;
}
table td img {
  max-width: unset;
}
table ul,
table ol {
  padding-left: 0;
}
table.low-density {
  font-size: 1.6rem;
}
table.low-density tr td.text-left:first-child {
  padding-left: 12px;
}
table.low-density td {
  padding: 12px 24px;
  font-size: inherit;
}

.white-space-initial {
  white-space: initial !important;
}

.min-width-150 {
  min-width: 150px;
}

.min-width-200 {
  min-width: 200px;
}

.min-width-250 {
  min-width: 250px;
}

.min-width-300 {
  min-width: 300px;
}

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

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

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

.justify-content-center {
  justify-content: center !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;
}

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

.input-wrapper {
  position: relative;
}
.input-wrapper .input-wrapper__inner {
  position: relative;
}
.input-wrapper .input-wrapper__inner + .input-wrapper__inner {
  margin-top: 16px;
}
.input-wrapper:not(:last-child) {
  margin-bottom: 16px;
}
.input-wrapper input {
  width: 100%;
}
.input-wrapper.toggle-password-visibility input {
  padding-right: 35px;
}
.input-wrapper.toggle-password-visibility .toggle-password-visibility-button {
  width: auto;
  background: none;
  padding: 4px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0;
  line-height: 0;
  transition: none;
}
.input-wrapper.toggle-password-visibility .just-validate-error-field + .toggle-password-visibility-button {
  top: 20px;
}
.input-wrapper.search .input-wrapper__inner {
  position: relative;
}
.input-wrapper.search input {
  padding-left: 36px !important;
}
.input-wrapper.search button {
  padding: 0;
  background-color: transparent;
  font-size: 0;
  line-height: 0;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.input-two-col-wrapper {
  display: flex;
  gap: 28px 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.input-two-col-wrapper + .input-two-col-wrapper {
  margin-top: 28px;
}
.input-two-col-wrapper .input-wrapper {
  width: calc(50% - 9px);
  min-width: 300px;
  margin-bottom: 0 !important;
}

.section-cta {
  margin-top: 100px;
}

.width-100 {
  width: 100%;
}

.bg-dark-red {
  color: #FFFFFF;
}
.bg-dark-red p {
  color: inherit;
}
.bg-dark-red a {
  color: inherit;
}
.bg-dark-red ul li::marker,
.bg-dark-red ol li::marker {
  color: #FFFFFF;
}

.bg-black {
  color: #FFFFFF;
}
.bg-black p {
  color: inherit;
}
.bg-black a {
  color: inherit;
}
.bg-black ul li::marker,
.bg-black ol li::marker {
  color: #FFFFFF;
}

.required-astrix {
  display: inline-block;
  padding: 0 3px;
  color: #AA182C;
}

.text-red {
  color: #DC2626 !important;
}

@media (min-width: 1400px) {
  .container {
    max-width: 1296px;
  }
  .container.narrow {
    max-width: 1096px;
  }
  .container.extra-narrow {
    max-width: 900px;
  }
}
@media (max-width: 767px) {
  .section-cta {
    margin-top: 50px;
  }
}
@media (max-width: 575px) {
  h1 {
    font-family: "primary-medium", Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 3.4rem;
    line-height: 4.4rem;
    margin-top: 65px;
    margin-bottom: 30px;
  }
  h2 {
    font-family: "primary-medium", Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 3.4rem;
    line-height: 4.4rem;
    margin-top: 65px;
    margin-bottom: 30px;
  }
}
/* 
	==== 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.
*/
/*
    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.
*/
/*
    ==== NAVIGATION MENU ====

    Description: 
        This is navigation menu in header.

    Modificators:
        No modificators.
*/
header .navigation-menu {
  display: flex;
  align-items: center;
  flex-direction: column;
  /*
      ==== FIRST LEVEL ====
  */
  /*
      ==== SECOND LEVEL ====
  */
  /*
      ==== THIRD LEVEL ====
  */
}
header .navigation-menu ul {
  margin: 0;
  padding: 0;
}
header .navigation-menu ul.active {
  display: block;
}
header .navigation-menu ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  margin-bottom: 0;
}
header .navigation-menu ul li::before {
  content: none;
}
header .navigation-menu ul li.active-page > a {
  color: #171717;
}
header .navigation-menu ul li.active-page > a path {
  fill: #171717;
}
header .navigation-menu ul li a {
  display: inline-flex;
  align-items: flex-start;
  font-size: 1.6rem;
  color: rgba(23, 23, 23, 0.6980392157);
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 1.8rem;
}
header .navigation-menu ul li a img {
  margin-top: 3px;
}
header .navigation-menu ul li a:hover {
  color: #171717;
  text-decoration: none;
}
header .navigation-menu ul li a:hover ~ .dropdown-button path {
  fill: #171717;
}
header .navigation-menu .dropdown-button {
  padding: 10px;
  font-size: 0;
  line-height: 0;
  position: absolute;
  right: -5px;
  top: -2px;
  transition: 0.2s ease;
  border: 0;
  background: none;
}
header .navigation-menu .dropdown-button.active {
  transform: rotate(180deg);
  transition: 0.2s ease;
}
header .navigation-menu .dropdown-parent.active > a {
  -webkit-text-fill-color: transparent;
}
header .navigation-menu > ul > li {
  position: relative;
  margin-right: 40px;
}
header .navigation-menu > ul > li:last-child {
  margin-right: 0 !important;
}
header .navigation-menu > ul > li.dropdown-parent {
  padding-right: 28px;
  margin-right: 20px;
}
header .navigation-menu > ul > li > a::before {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background-color: #171717;
  position: absolute;
  bottom: -5px;
  left: -12px;
  right: 0;
  transition: 0.3s ease;
}
header .navigation-menu > ul > li > a:hover::before {
  width: calc(100% + 24px);
  transition: 0.3s ease;
}
header .navigation-menu > ul > li > ul {
  background-color: #FFFFFF;
  display: none;
  position: absolute;
  left: 12px;
  right: 0;
  top: calc(100% + 12px);
  min-width: 180px;
  border-radius: 6px;
  padding: 6px;
  transform: translateX(-20px);
  box-shadow: 0px 20px 57px 0px rgba(0, 0, 0, 0.15);
  max-height: calc(100dvh - 200px);
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
header .navigation-menu > ul > li > ul > li {
  display: block;
  transition: 0.2s ease;
  font-size: 1.6rem;
}
header .navigation-menu > ul > li > ul > li > a {
  color: rgba(23, 23, 23, 0.6980392157);
  padding: 8px 10px;
  width: 100%;
  border-radius: 4px;
}
header .navigation-menu > ul > li > ul > li > a > img {
  margin-right: 13px;
}
header .navigation-menu > ul > li > ul > li > a:hover {
  background-color: #E7E5E4;
  transition: 0.2s ease;
  color: rgba(23, 23, 23, 0.6980392157);
}
header .navigation-menu > ul > li > ul > li > .dropdown-button {
  top: 6px;
  right: 0;
}
header .navigation-menu > ul > li > ul > li > ul {
  display: none;
  position: relative;
  padding-left: 15px;
}
header .navigation-menu > ul > li > ul > li > ul::before {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% - 10px);
  position: absolute;
  display: block;
  top: 5px;
  bottom: 15px;
  left: 10px;
  background: #AA182C;
}
header .navigation-menu > ul > li > ul > li > ul > li {
  display: block;
}
header .navigation-menu > ul > li > ul > li > ul > li > a {
  transition: 0.2s ease;
  color: rgba(23, 23, 23, 0.6980392157);
  padding: 8px 10px;
  width: 100%;
  display: block;
  border-radius: 4px;
}
header .navigation-menu > ul > li > ul > li > ul > li > a:hover {
  transform: translateX(5px);
  text-decoration: none;
}

header button.hamburger-button {
  display: none;
}

@media (max-width: 1199px) {
  header .main-menu .navigation-menu {
    position: fixed;
    top: calc(var(--headerHeight, 78px) + var(--preheaderHeight, 0));
    right: 0;
    height: calc(100% - var(--headerHeight, 78px) - var(--preheaderHeight, 0));
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
    align-items: flex-start;
    width: 350px;
    transform: translateX(100%);
    transition: transform 0.4s ease-out;
    padding-bottom: 150px;
    padding-top: 40px;
    background-color: #FFFFFF;
    /*
        ==== FIRST LEVEL ====
    */
    /*
        ==== SECOND LEVEL ====
    */
    /*
        ==== THIRD LEVEL ====
    */
  }
  header .main-menu .navigation-menu.active {
    transform: translateX(0);
    transition: transform 0.4s ease-out;
    box-shadow: 7px 19px 12px 10px rgba(0, 0, 0, 0.3);
  }
  header .main-menu .navigation-menu .items-container {
    position: absolute;
    bottom: 40px;
    left: 0;
  }
  header .main-menu .navigation-menu ul {
    background-color: transparent;
  }
  header .main-menu .navigation-menu ul li {
    width: 100%;
    display: block;
  }
  header .main-menu .navigation-menu > ul {
    width: 100%;
    max-height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  header .main-menu .navigation-menu > ul::-webkit-scrollbar {
    display: none;
  }
  header .main-menu .navigation-menu > ul > li {
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 50px;
    padding-right: 50px;
  }
  header .main-menu .navigation-menu > ul > li.dropdown-parent:not(:last-child) > .dropdown-button {
    right: 40px;
  }
  header .main-menu .navigation-menu > ul > li::before {
    background-color: #0F1C3B;
    display: inline-block;
    bottom: 0;
    top: unset;
    transform: none;
    width: calc(100% - 110px);
    height: 1px;
    background-image: none;
    left: 50px;
    right: 50px;
  }
  header .main-menu .navigation-menu > ul > li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  header .main-menu .navigation-menu > ul > li > .dropdown-button {
    top: 11px;
    right: 48px;
  }
  header .main-menu .navigation-menu > ul > li > a {
    transition: 0.2s ease;
  }
  header .main-menu .navigation-menu > ul > li > a:hover {
    transform: translateX(5px);
    text-decoration: none;
  }
  header .main-menu .navigation-menu > ul > li > a:hover::before {
    content: none;
  }
  header .main-menu .navigation-menu > ul > li > ul {
    position: static;
    min-width: unset;
    width: 100%;
    transform: translateY(0);
    border-radius: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 10px;
    background-color: transparent;
    box-shadow: none;
    left: 0;
    max-height: unset;
  }
  header .main-menu .navigation-menu > ul > li > ul::before {
    content: none;
  }
  header .main-menu .navigation-menu > ul > li > ul > li {
    padding-bottom: 0;
    padding-top: 0;
  }
  header .main-menu .navigation-menu > ul > li > ul > li > .dropdown-button {
    top: 4px;
    right: -10px;
  }
  header .main-menu .navigation-menu > ul > li > ul > li > a {
    transition: 0.2s ease;
  }
  header .main-menu .navigation-menu > ul > li > ul > li > a:hover {
    background-color: transparent;
    color: #171717;
    transform: translateX(5px);
    transition: 0.2s ease;
  }
  header button.hamburger-button {
    display: flex;
    margin-right: -5px;
  }
}
@media (max-width: 500px) {
  header .main-menu .navigation-menu {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 100px;
    /*
        ==== FIRST LEVEL ====
    */
    /*
        ==== SECOND LEVEL ====
    */
  }
  header .main-menu .navigation-menu .items-container {
    position: absolute;
    bottom: 10px;
    left: 0;
  }
  header .main-menu .navigation-menu > ul > li {
    padding-left: 15px;
    padding-right: 15px;
  }
  header .main-menu .navigation-menu > ul > li.dropdown-parent:not(:last-child) > .dropdown-button {
    right: 15px;
  }
  header .main-menu .navigation-menu > ul > li.dropdown-parent:not(:last-child) {
    padding-right: 15px;
  }
  header .main-menu .navigation-menu > ul > li::before {
    width: calc(100% - 30px);
    left: 15px;
    right: 15px;
  }
  header .main-menu .navigation-menu > ul > li > .dropdown-button {
    right: 15px;
  }
  header .main-menu .navigation-menu > ul > li > ul > li > .dropdown-button {
    right: 0;
  }
}
header {
  position: fixed;
  top: var(--preheaderHeight, 56px);
  left: 0;
  right: 0;
  transition: transform 0.2s ease-out;
  z-index: 10;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E0E0E0;
}
header .container,
header .container-fluid {
  position: relative;
}
header.hide {
  transform: translateY(calc(-100% - 10px));
  transition: transform 0.2s ease-out;
}
header.show {
  transform: translateY(0);
}
header.floating-header {
  box-shadow: 0px 5px 9.5px 0.5px rgba(0, 0, 0, 0.15);
  top: 0;
}
header .header__inner {
  display: flex;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 20px;
  justify-content: space-between;
}
header .menu-wrapper .menu__inner {
  display: flex;
  align-items: center;
}
header .menu-wrapper .menu__inner .main-menu {
  margin-right: 28px;
}
header .menu-wrapper .menu__inner .main-menu .item {
  font-size: 1.4rem;
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  padding: 0 50px;
}
header .menu-wrapper .menu__inner .main-menu .item:not(:last-child) {
  margin-bottom: 10px;
}
header .menu-wrapper .menu__inner .main-menu .item .item__inner {
  display: flex;
  align-items: center;
}
header .menu-wrapper .menu__inner .main-menu .item .item__inner .image {
  margin-right: 8px;
  font-size: 0;
  line-height: 0;
}
header .menu-wrapper .menu__inner .main-menu .item svg {
  fill: #AA182C;
}
header .menu-wrapper .menu__inner .profile-menu {
  padding-left: 28px;
  border-left: 1px solid #D6D3D1;
}
header .menu-wrapper .menu__inner .profile-menu nav > ul > li {
  display: flex;
}
header .menu-wrapper .menu__inner .profile-menu nav > ul > li > .dropdown-button {
  position: relative;
  right: 0;
  top: 0;
  padding: 0;
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: rgba(23, 23, 23, 0.6980392157);
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  display: flex;
  align-items: center;
  cursor: pointer;
}
header .menu-wrapper .menu__inner .profile-menu nav > ul > li > .dropdown-button span {
  max-width: 75px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
header .menu-wrapper .menu__inner .profile-menu nav > ul > li > .dropdown-button svg,
header .menu-wrapper .menu__inner .profile-menu nav > ul > li > .dropdown-button img {
  margin-right: 10px;
}
header .menu-wrapper .menu__inner .profile-menu nav > ul > li > .dropdown-button.active, header .menu-wrapper .menu__inner .profile-menu nav > ul > li > .dropdown-button:hover {
  transform: none;
  color: #171717;
}
header .menu-wrapper .menu__inner .profile-menu nav > ul > li > .dropdown-button.active::before, header .menu-wrapper .menu__inner .profile-menu nav > ul > li > .dropdown-button:hover::before {
  content: "";
  display: block;
  width: calc(100% + 12px);
  height: 1px;
  background-color: #171717;
  position: absolute;
  bottom: -7px;
  left: -4px;
  right: 0;
}
header .menu-wrapper .menu__inner .profile-menu nav > ul > li > .dropdown-button.active svg path, header .menu-wrapper .menu__inner .profile-menu nav > ul > li > .dropdown-button:hover svg path {
  stroke-opacity: 1;
}
header .menu-wrapper .menu__inner .profile-menu nav > ul > li > a span {
  vertical-align: middle;
}
header .menu-wrapper .menu__inner .profile-menu nav > ul > li > a svg {
  vertical-align: middle;
  margin-right: 8px;
}
header .menu-wrapper .menu__inner .profile-menu nav > ul > li > a span + svg {
  margin-left: 8px;
  margin-right: 0;
}
header .menu-wrapper .menu__inner .profile-menu nav > ul > li > a:hover path {
  stroke-opacity: 1;
}
header .menu-wrapper .menu__inner .profile-menu nav > ul > li > ul {
  min-width: 226px;
  left: unset;
  right: 0;
  transform: translateX(6px);
}
header .logo {
  min-width: 61px;
  font-size: 0;
  line-height: 0;
}

@media (max-width: 500px) {
  header .menu-wrapper .menu__inner .main-menu .item {
    padding: 0 15px;
  }
}
/*
    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.
*/
/*
    ==== PREHEADER ====

    Description: 
        Website preheader.

    Modificators:
        No modificators.
*/
.preheader {
  background-color: #AA182C;
  font-size: 1.4rem;
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  line-height: 2rem;
  z-index: 11;
  min-height: 56px;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1215686275);
}
.preheader .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  row-gap: 10px;
  flex-wrap: wrap;
}
.preheader .content .item .item__inner {
  display: flex;
  align-items: center;
}
.preheader .content .item .image {
  margin-right: 8px;
  font-size: 0;
  line-height: 0;
}
.preheader .content .item .image img {
  min-width: 20px;
}
.preheader a {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.preheader.fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.preheader .contact-and-language .contact-and-language__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  -moz-column-gap: 40px;
       column-gap: 40px;
  row-gap: 10px;
}
.preheader .contact-and-language .contact .contact__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  -moz-column-gap: 40px;
       column-gap: 40px;
  row-gap: 10px;
}
.preheader .choices {
  font-size: 1.4rem;
}
.preheader .choices.is-open::after {
  transform: rotate(180deg);
  transition: 0.2s ease;
  top: 7px;
}
.preheader .choices .choices__list {
  padding-left: 0;
  padding-bottom: 0;
  padding-top: 0;
}
.preheader .choices .choices__item {
  min-width: 33px;
  color: #FFFFFF;
  font-size: 1.4rem;
}
.preheader .choices .choices__item.is-highlighted {
  background-color: #F5F5F4;
}
.preheader .choices .choices__inner {
  display: inline-block;
  background-color: transparent;
  color: #FFFFFF;
  border: none;
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 26px;
  min-height: unset;
  line-height: 1.6rem;
  vertical-align: middle;
}
.preheader .choices:after {
  background-image: url("../../img/icons/arrows/arrow-dropdown--white.svg");
  border: none;
  width: 15px;
  height: 8px;
  background-size: initial;
  background-repeat: no-repeat;
  background-position: center;
  right: 0;
  transition: 0.2s ease;
  transform-origin: bottom;
  top: 10px;
}
.preheader .choices .choices__list--dropdown {
  border-radius: 0;
  top: calc(100% + 19px);
  border-top: none;
  width: calc(100% + 20px);
  left: -10px;
}
.preheader .choices .choices__list--dropdown .choices__item {
  padding: 10px;
}

/*
    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 {
  background-color: #FFFFFF;
}
footer .contact {
  color: #171717;
  border-top: 1px solid rgba(0, 0, 0, 0.1215686275);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1215686275);
  padding-top: 24px;
  padding-bottom: 24px;
}
footer .contact .contact__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 20px;
  -moz-column-gap: 112px;
       column-gap: 112px;
}
footer .contact .contact__inner .item {
  font-size: 1.4rem;
}
footer .contact .contact__inner .item .text {
  font-size: inherit;
  line-height: 2rem;
  letter-spacing: 0.5px;
  color: inherit;
}
footer .contact .contact__inner .item .item__inner {
  display: flex;
  align-items: center;
  color: inherit;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  row-gap: 5px;
}
footer .contact .contact__inner .item .item__inner .icon {
  margin-right: 15px;
  font-size: 0;
  line-height: 0;
}
footer .contact .contact__inner .item:not(:last-child) {
  position: relative;
}
footer .contact .contact__inner .item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -56px;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.1215686275);
  width: 1px;
  height: 24px;
}
footer .marquee {
  margin-top: 32px;
}
footer .main {
  margin-top: 88px;
  margin-bottom: 48px;
}
footer .main:first-child {
  margin-top: 48px;
}
footer .main .main__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 48px;
  justify-content: space-between;
}
footer .main .menu {
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
}
footer .main .menu .title {
  margin-bottom: 28px;
}
footer .main .menu .title * {
  display: block;
  text-transform: uppercase;
  color: #595959;
  font-size: 1.4rem;
  font-family: inherit;
  letter-spacing: 3px;
  line-height: 1.7rem;
}
footer .main .menu nav ul {
  padding: 0;
}
footer .main .menu nav ul li {
  color: #131313;
  list-style-type: none;
  font-size: 1.4rem;
  line-height: 2rem;
}
footer .main .menu nav ul li:not(:last-child) {
  margin-bottom: 20px;
}
footer .main .menu nav ul li a {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
}
footer .main .menu nav > ul > li > ul {
  margin-top: 8px;
}
footer .main .menu nav > ul > li > ul > li {
  margin-left: 20px;
  list-style: circle;
}
footer .main .menu nav > ul > li > ul > li:not(:last-child) {
  margin-bottom: 8px;
}
footer .postfooter {
  padding-bottom: 28px;
}
footer .postfooter .postfooter__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  -moz-column-gap: 30px;
       column-gap: 30px;
  row-gap: 10px;
}
footer .postfooter .postfooter__inner .copyright {
  color: #595955;
  font-size: 1.4rem;
  line-height: 2.4rem;
  letter-spacing: 1px;
}
footer .postfooter .postfooter__inner .menu nav ul {
  display: flex;
  padding: 0;
}
footer .postfooter .postfooter__inner .menu nav ul li {
  color: #595959;
  font-size: 1.4rem;
  line-height: 2.4rem;
  letter-spacing: 1px;
  list-style-type: none;
}
footer .postfooter .postfooter__inner .menu nav ul li a {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
footer .postfooter .postfooter__inner .menu nav ul li:not(:last-child) {
  margin-right: 20px;
}

@media (max-width: 991px) {
  footer .main .main__inner {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 767px) {
  footer .main .main__inner {
    grid-template-columns: 1fr 1fr;
  }
  footer .contact .contact__inner .item:not(:last-child)::after {
    content: none;
  }
}
@media (max-width: 450px) {
  footer .main .main__inner {
    display: block;
  }
  footer .main .main__inner .menu {
    text-align: center;
  }
  footer .main .main__inner .menu:not(:last-child) {
    margin-bottom: 48px;
  }
  footer .postfooter .postfooter__inner {
    text-align: center;
    flex-direction: column-reverse;
    row-gap: 20px;
  }
  footer .postfooter .postfooter__inner .menu nav ul {
    display: block;
    text-align: center;
  }
  footer .postfooter .postfooter__inner .menu nav ul li {
    text-align: center;
  }
  footer .postfooter .postfooter__inner .menu nav ul li:not(:last-child) {
    margin-bottom: 20px;
    margin-right: 0;
  }
}
/* 
	==== Components ==== 
*/
/*
    File Name: _components.scss

    Description:
    This is the components 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 components 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:
        No modificators.
*/
button,
.button,
.button--tertiary,
.button--secondary,
.button--primary {
  display: inline-block;
  padding: 16px 32px;
  letter-spacing: 0.5px;
  outline: none;
  border: none;
  cursor: pointer;
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1.6rem;
  line-height: 2.6rem;
  transition: 0.2s ease;
  text-decoration: none;
  position: relative;
  text-align: center;
}
button:hover,
.button:hover,
.button--tertiary:hover,
.button--secondary:hover,
.button--primary:hover {
  transition: 0.2s ease;
}
button.disabled, button[disabled],
.button.disabled,
.disabled.button--tertiary,
.disabled.button--secondary,
.disabled.button--primary,
.button[disabled],
[disabled].button--tertiary,
[disabled].button--secondary,
[disabled].button--primary {
  cursor: not-allowed;
}
button.with-icon,
.button.with-icon,
.with-icon.button--tertiary,
.with-icon.button--secondary,
.with-icon.button--primary {
  padding-left: 46px !important;
  width: auto !important;
  text-align: right;
  display: flex;
  align-items: center;
}
button.with-icon .icon,
.button.with-icon .icon,
.with-icon.button--tertiary .icon,
.with-icon.button--secondary .icon,
.with-icon.button--primary .icon {
  display: block;
  width: 14px;
  height: 14px;
  margin-right: 14px;
  font-size: 0;
  line-height: 0;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

button.hamburger-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
}
button.hamburger-button .line {
  fill: none;
  stroke: #AA182C;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
button.hamburger-button .line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
button.hamburger-button .line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}
button.hamburger-button .line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.navigation-menu.active + button.hamburger-button .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}
.navigation-menu.active + button.hamburger-button .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}
.navigation-menu.active + button.hamburger-button .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.add-url-btn {
  color: #AA182C;
  font-family: "primary-medium", Arial, Helvetica, sans-serif !important;
  font-size: 1.4rem !important;
  line-height: 1.4rem !important;
  padding: 0;
  background-color: transparent;
  display: inline-block;
  width: auto !important;
  padding-right: 20px;
}
.add-url-btn::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("../../img/icons/plus.svg");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 3;
  transition: 0.3s ease;
}
.add-url-btn:hover::before {
  transform: translateY(-50%) rotate(180deg);
  transition: 0.3s ease;
}

.remove-url-btn,
.remove-file-btn {
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  background-color: transparent;
  display: inline-block;
  width: auto !important;
  position: relative;
  padding: 0;
  vertical-align: middle;
  margin-left: 10px;
}
.remove-url-btn::before,
.remove-file-btn::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 18px;
  background-image: url("../../img/icons/xmark.svg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 3;
  transition: 0.3s ease;
}

/*
    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.
*/
/*
    ==== PRIMARY BUTTON ====

    Component description:
        Website primary button.

    Modificators:
        No modificators.
*/
.button--primary {
  background-color: #AA182C;
  color: #FFFFFF;
  border: 1px solid transparent;
}
.button--primary::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: 0.2s ease;
  background-color: transparent;
}
.button--primary span {
  position: relative;
  z-index: 2;
}
.button--primary:hover {
  text-decoration: none;
}
.button--primary:hover::before {
  transition: 0.2s ease;
  background-color: rgba(0, 0, 0, 0.1019607843);
}
.button--primary[disabled], .button--primary.disabled {
  background-color: #D6D3D1;
  color: #A8A29E;
}
.button--primary[disabled]::before, .button--primary.disabled::before {
  content: none;
}

.bg-dark-red .button--primary {
  color: #AA182C;
  background-color: #FFFFFF;
}
.bg-dark-red .button--primary::before {
  content: none;
}
.bg-dark-red .button--primary:hover {
  background-color: #AA182C;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
}
.bg-dark-red .button--primary[disabled], .bg-dark-red .button--primary.disabled {
  background-color: #D6D3D1;
  color: #A8A29E;
  border-color: transparent;
}
.bg-dark-red .button--primary[disabled]:hover, .bg-dark-red .button--primary.disabled:hover {
  color: #A8A29E;
}

/*
    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.
*/
/*
    ==== SECONDARY BUTTON ====

    Component description:
        Website secondary button.

    Modificators:
        No modificators.
*/
.button--secondary {
  background-color: #FFFFFF;
  color: #171717;
  border: 1px solid #D6D3D1;
}
.button--secondary span {
  position: relative;
  z-index: 2;
}
.button--secondary:hover {
  text-decoration: none;
  background-color: #AA182C;
  color: #FFFFFF;
  border-color: transparent;
}
.button--secondary[disabled], .button--secondary.disabled {
  background-color: #D6D3D1;
  color: #A8A29E;
}

.bg-black .button--secondary {
  color: #131313;
}
.bg-black .button--secondary:hover {
  background-color: #AA182C;
  color: #FFFFFF;
  border: 1px solid transparent;
}
.bg-black .button--secondary[disabled], .bg-black .button--secondary.disabled {
  background-color: #D6D3D1;
  color: #A8A29E;
  border-color: transparent;
}

.bg-dark-red .button--secondary {
  color: #171717;
}
.bg-dark-red .button--secondary:hover {
  border-color: #FFFFFF;
  color: #FFFFFF;
}
.bg-dark-red .button--secondary[disabled], .bg-dark-red .button--secondary.disabled {
  background-color: #D6D3D1;
  color: #A8A29E;
  border-color: transparent;
}

/*
    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.
*/
/*
    ==== TERTIARY BUTTON ====

    Component description:
        Website tertiary button.

    Modificators:
        No modificators.
*/
.button--tertiary {
  background-color: #F5F5F4;
  border: 1px solid #D6D3D1;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.button--tertiary:hover {
  background-color: #D6D3D1;
  color: #131313;
  text-decoration: none;
}
.button--tertiary:hover img {
  filter: brightness(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.
*/
/*
    ==== NAV CONTROL BUTTON ====

    Component description:
        Navigation control button.

    Modificators:
        No modificators.
*/
.nav-control-button {
  padding: 0;
  width: 56px;
  height: 56px;
  background-color: transparent;
  border: 1px solid #D6D3D1;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 0;
  transition: 0.3s ease;
}
.nav-control-button::before {
  content: "";
  width: 15px;
  height: 12px;
  background-image: url("../../img/icons/arrows/arrow-full--black.webp");
}
.nav-control-button.nav-control-button--prev::before {
  transform: rotate(-180deg);
}
.nav-control-button:hover {
  transition: 0.3s ease;
  border-color: #AA182C;
}
.nav-control-button:hover::before {
  background-image: url("../../img/icons/arrows/arrow-full--red.webp");
}

.bg-black .nav-control-button::before {
  background-image: url("../../img/icons/arrows/arrow-full--white.webp");
}
.bg-black .nav-control-button:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
}
.bg-black .nav-control-button:hover::before {
  background-image: url("../../img/icons/arrows/arrow-full--black.webp");
}

.bg-dark-red .nav-control-button::before {
  background-image: url("../../img/icons/arrows/arrow-full--white.webp");
}
.bg-dark-red .nav-control-button:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
}
.bg-dark-red .nav-control-button:hover::before {
  background-image: url("../../img/icons/arrows/arrow-full--black.webp");
}

/*
    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.
*/
/*
    ==== INPUT ====

    Component description:
        Input component.

    Modificators:
        No modificators.
*/
input {
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: 2.4rem;
  border: 1px solid #D6D3D1;
  outline: none;
  padding: 7px 15px;
}
input:focus {
  border: 1px solid #171717;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0588235294);
}
input:focus-visible {
  border: 1px solid #171717;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0588235294);
}
input::placeholder, input:-ms-input-placeholder, input::-ms-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input::-webkit-input-placeholder {
  opacity: 1;
  color: #A8A29E;
}
input[disabled] {
  background-color: #EEECEB;
  color: #000000;
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
input[disabled]::placeholder, input[disabled]:-ms-input-placeholder, input[disabled]::-ms-input-placeholder, input[disabled]:-moz-placeholder, input[disabled]::-moz-placeholder, input[disabled]::-webkit-input-placeholder {
  opacity: 1;
  color: rgba(23, 23, 23, 0.6980392157);
}

/*
    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.
*/
/*
    ==== TEXTAREA ====

    Component description:
        Textarea component.

    Modificators:
        No modificators.
*/
textarea {
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: 2.4rem;
  border: 1px solid #D6D3D1;
  width: 100%;
  height: 206px;
  outline: none;
  padding: 7px 15px;
  white-space: pre-line;
  resize: none;
}
textarea:focus {
  border: 1px solid #171717;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0588235294);
}
textarea:focus-visible {
  border: 1px solid #171717;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0588235294);
}
textarea::placeholder, textarea:-ms-input-placeholder, textarea::-ms-input-placeholder, textarea:-moz-placeholder, textarea::-moz-placeholder, textarea::-webkit-input-placeholder {
  opacity: 1;
  color: #A8A29E;
}
textarea[disabled] {
  background-color: #D6D3D1;
}
textarea[disabled]::placeholder, textarea[disabled]:-ms-input-placeholder, textarea[disabled]::-ms-input-placeholder, textarea[disabled]:-moz-placeholder, textarea[disabled]::-moz-placeholder, textarea[disabled]::-webkit-input-placeholder {
  opacity: 1;
  color: rgba(23, 23, 23, 0.6980392157);
}

/*
    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.
*/
/*
    ==== SELECT ====

    Component description:
        Select component.

    Modificators:
        No modificators.
*/
.choices.is-open {
  z-index: 15;
}
.choices .choices__inner {
  padding-right: 15px;
  padding-bottom: 7.5px;
  padding-left: 15px;
  display: flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid #D6D3D1;
  background-color: #FFFFFF;
}
.choices .choices__list {
  padding: 0;
  z-index: 3;
}
.choices .choices__item {
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: #171717;
}
.choices .choices__list--dropdown .choices__item {
  padding: 11px 15px;
  color: #AA182C;
  font-size: 1.4rem;
  color: #171717;
}
.choices[data-type*=select-one]::after {
  border-color: #000000 transparent transparent;
}
.choices[data-type*=select-one] .choices__input {
  border: none;
  border-bottom: 1px solid #ddd;
}
.choices .choices__item.custom-highlighted-item {
  color: #AA182C !important;
}
.choices #choices--project_id-item-choice-1 {
  color: #AA182C;
}
.choices.is-disabled .choices__inner, .choices.is-disabled .choices__input {
  background-color: #EEECEB;
}

/*
    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.
*/
/*
    ==== SEARCH INPUT ====

    Component description:
        Search input component.

    Modificators:
        No modificators.
*/
.search-input {
  display: flex;
  gap: 8px;
}
.search-input:not(:last-child) {
  margin-bottom: 56px;
}
.search-input .search-form {
  margin-bottom: 56px;
}
.search-input:last-child {
  margin-bottom: 0;
}
.search-input input {
  margin-top: 0;
  height: 56px;
  font-size: 1.8rem;
  border-radius: 12px;
  border-color: #A8A29E;
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
}
.search-input input::placeholder, .search-input input:-ms-input-placeholder, .search-input input::-ms-input-placeholder, .search-input input:-moz-placeholder, .search-input input::-moz-placeholder, .search-input input::-webkit-input-placeholder {
  opacity: 1;
  color: #78716C;
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
}
.search-input button {
  width: 56px;
  height: 56px;
  padding: 0;
  min-width: 56px;
  border-radius: 12px;
}
.search-input button::after {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url("../../img/icons/search--white.webp");
  background-repeat: no-repeat;
  position: absolute;
  background-size: cover;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.search-input .input-wrapper {
  margin-bottom: 0;
  width: 95%;
}

.search-input.bg-dark-red button::after,
.bg-dark-red .search-input button::after {
  background-image: url("../../img/icons/search.webp");
}
.search-input.bg-dark-red button:hover,
.bg-dark-red .search-input button:hover {
  background-color: #FFFFFF;
}

/*
    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.
*/
/*
    ==== CHECKBOX ====

    Component description:
        Checkbox component.

    Modificators:
        No modificators.
*/
.checkbox-container {
  display: inline-flex;
  position: relative;
  cursor: pointer;
  font-size: 1.4rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  line-height: unset;
  vertical-align: middle;
}
.checkbox-container + a {
  vertical-align: middle;
  font-size: 1.4rem;
}
.checkbox-container .inner {
  position: relative;
  margin-right: 6px;
  margin-top: 1px;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0 !important;
  width: 0 !important;
}

.checkbox-container input[type=radio] + .checkmark {
  border-radius: 50%;
  position: relative;
}
.checkbox-container input[type=radio] + .checkmark::after {
  left: 5px;
  top: 2px;
  width: 4px;
}

.checkbox-container input[type=radio] + .checkmark::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: none;
  width: 6px;
  height: 6px;
  background: #AA182C;
  border-radius: 50%;
}

.checkmark {
  border-radius: 4px;
  width: 16px;
  height: 16px;
  display: block;
  border: 1px solid #7C7C7C;
  border-radius: 4px;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 5px;
  top: 2px;
  width: 6px;
  height: 9px;
  border: solid #AA182C;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.bg-grey-darker .checkbox-container {
  color: #FFFFFF;
}
.bg-grey-darker .checkbox-container .checkmark:after {
  border-color: #131313;
}
.bg-grey-darker .checkbox-container input[type=radio]:checked ~ .checkmark {
  border-color: #ffffff;
}
.bg-grey-darker .checkbox-container input[type=radio]:checked ~ .checkbox-label {
  color: #ffffff;
}

.bg-blue .checkbox-container {
  color: #7C7C7C;
}
.bg-blue .checkbox-container .checkmark:after {
  border-color: #FFFFFF;
}
.bg-blue .checkmark {
  border-color: #FFFFFF;
}

/*
    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.
*/
/*
    ==== INPUT FILE ====

    Component description:
        Input with type="file".

    Modificators:
        No modificators.
*/
.input-wrapper--file input[type=file] {
  position: relative;
  opacity: 0;
  z-index: 3;
  cursor: pointer;
}
.input-wrapper--file .input-wrapper__inner {
  position: relative;
}
.input-wrapper--file .input-wrapper__inner .button-file-input {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  border: 2px dashed #D6D3D1;
  background-color: transparent;
}

@media (max-width: 767px) {
  .input-wrapper--file .input-wrapper__inner {
    min-height: 70px;
  }
}
/*
    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.
*/
/*
    ==== MARQUEE ====

    Component description:
        Marquee effect.
        Currently imported and used only in hero section, not available in global styles.

    Modificators:
        No modificators.
*/
.marquee .marquee__title {
  font-size: 2rem;
  line-height: 3rem;
  margin-bottom: 60px;
}
.marquee .marquee__item {
  display: inline-flex;
  align-items: center;
}
.marquee .marquee__inner .content-holder {
  display: none;
}
.marquee .supermarquee-inner-container .supermarquee-item-clone {
  gap: 60px;
  margin-left: 60px;
}
.marquee .supermarquee-inner-container .supermarquee-item {
  gap: 60px;
}

/*
    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.
*/
/*
    ==== HEADING OF WEBSITE ====

    Component description:
        Section title.

    Modificators:
        No modificators.
*/
.heading {
  max-width: 880px;
  margin-bottom: 50px;
}
.heading:empty {
  display: none;
  margin: 0;
  padding: 0;
}
.heading:last-child {
  margin-bottom: 0;
}
.heading .title {
  margin-bottom: 25px;
}
.heading .title:empty {
  display: none;
  margin: 0;
  padding: 0;
}
.heading .title h1,
.heading .title h2,
.heading .title h3,
.heading .title h4,
.heading .title h5,
.heading .title h6 {
  font-size: 5.6rem;
  line-height: 5.6rem;
  margin-top: 0;
  margin-bottom: 0;
}
.heading .title:last-child {
  margin-bottom: 0;
}
.heading .subtitle {
  font-size: 1.6rem;
  line-height: 2rem;
  color: #7C7C7C;
}
.heading .subtitle:empty {
  display: none;
  margin: 0;
  padding: 0;
}
.heading .subtitle p {
  margin-top: 0;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}
.heading .subtitle p:last-child {
  margin-bottom: 0;
}
.heading .subtitle p:first-child {
  margin-bottom: 0;
}
.heading .image {
  margin-bottom: 32px;
}

.heading.text-center,
.text-center .heading {
  margin-left: auto;
  margin-right: auto;
}
.heading.text-center .subtitle,
.heading.text-center .image,
.text-center .heading .subtitle,
.text-center .heading .image {
  margin-left: auto;
  margin-right: auto;
}

.heading.text-right,
.text-right .heading {
  margin-left: auto;
  margin-right: 0;
}
.heading.text-right .subtitle,
.heading.text-right .image,
.text-right .heading .subtitle,
.text-right .heading .image {
  margin-left: auto;
  margin-right: 0;
}

.heading.text-left,
.text-left .heading {
  margin-left: 0;
  margin-right: auto;
}
.heading.text-left .subtitle,
.heading.text-left .image,
.text-left .heading .subtitle,
.text-left .heading .image {
  margin-left: 0;
  margin-right: auto;
}

.bg-dark-red .heading .subtitle {
  color: #131313;
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
}

@media (min-width: 992px) {
  .heading .subtitle {
    max-width: 80%;
  }
}
@media (max-width: 767px) {
  .heading .title h1,
  .heading .title h2,
  .heading .title h3,
  .heading .title h4,
  .heading .title h5,
  .heading .title h6 {
    font-size: 4rem;
    line-height: 4.4rem;
  }
}
/*
    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.
*/
/*
    ==== SEPARATOR ====

    Component description:
        Separator.

    Modificators:
        No modificators.
*/
.separator {
  position: relative;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.separator::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-color: #E7E5E4;
}
.separator span {
  background-color: #FFFFFF;
  z-index: 2;
  position: relative;
  font-size: 1.3rem;
  line-height: 1.9rem;
  padding: 6px;
}

/*
    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.
*/
/*
    ==== SYSTEM NOTIFICATION ====

    Component description:
        System notification.

    Modificators:
        No modificators.
*/
.system-notification {
  padding: 8px 44px 8px 12px;
  position: relative;
  border: 1px solid #E7E5E4;
  background-color: #FFFFFF;
  color: #171717;
  max-width: 500px;
  margin-left: 15px;
  margin-right: 15px;
  left: 50%;
  transform: translateX(-54%);
  transition: 0.3s ease;
}
.system-notification:first-child {
  margin-top: 56px;
}
.system-notification .content {
  display: flex;
  align-items: flex-start;
}
.system-notification .content .icon {
  margin-right: 10px;
  font-size: 0;
  line-height: 0;
  margin-top: 1px;
}
.system-notification .title {
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  line-height: 2rem;
}
.system-notification .title * {
  font-family: inherit;
}
.system-notification .icon {
  min-width: 20px;
}
.system-notification p {
  color: inherit;
  font-size: 1.4rem;
  margin-top: 4px;
}
.system-notification p:last-child {
  margin-bottom: 0;
}
.system-notification .button-close-notification {
  width: auto;
  padding: 15px;
  background: none;
  font-size: 0;
  line-height: 0;
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
}
.system-notification.yellow {
  background-color: #FEF9C3;
  color: #854D0E;
  border: 1px solid #E7E5E4;
}
.system-notification.red {
  background-color: #FEE2E2;
  color: #B91C1C;
  border: 1px solid #FAC0C0;
}
.system-notification.green {
  background-color: #CCFBF1;
  color: #115E59;
  border: 1px solid #9DEEDE;
}
.system-notification + .system-notification {
  margin-top: 50px;
}
.system-notification.hide {
  transition: 0.3s ease;
  transform: translateX(-100%);
  opacity: 0;
}

.alert {
  position: relative;
  padding: 19px 44px;
  border: 1px solid #E7E5E4;
  background-color: #FFFFFF;
  color: #171717;
  max-width: 500px;
  margin-left: 15px;
  margin-right: 15px;
  left: 50%;
  transform: translateX(-54%);
  transition: 0.3s ease;
}
.alert + .alert {
  margin-top: 50px;
}
.alert:first-child {
  margin-top: 56px;
}
.alert::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 20px;
  left: 12px;
}
.alert p {
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  line-height: 2rem;
  margin-top: 0 !important;
}
.alert p:last-child {
  margin-bottom: 0;
}
.alert button.close {
  width: auto;
  padding: 15px;
  background: none;
  font-size: 0;
  line-height: 0;
  position: absolute;
  right: 12px;
  top: 15px;
}
.alert button.close::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-image: url("../../img/icons/x/x--black.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.alert.alert-danger {
  background-color: #FEE2E2;
  color: #B91C1C;
  border: 1px solid #FAC0C0;
}
.alert.alert-danger button.close::before {
  background-image: url("../../img/icons/x/x--red.webp");
}
.alert.alert-danger::before {
  background-image: url("../../img/icons/system-notification/error.webp");
}
.alert.alert-warning {
  background-color: #FEF9C3;
  color: #854D0E;
  border: 1px solid #E7E5E4;
}
.alert.alert-warning button.close::before {
  background-image: url("../../img/icons/x/x--yellow.webp");
}
.alert.alert-warning::before {
  background-image: url("../../img/icons/system-notification/warning.webp");
}
.alert.alert-success {
  background-color: #CCFBF1;
  color: #115E59;
  border: 1px solid #9DEEDE;
}
.alert.alert-success button.close::before {
  background-image: url("../../img/icons/x/x--green.webp");
}
.alert.alert-success::before {
  background-image: url("../../img/icons/system-notification/success.webp");
}
.alert.alert-info::before {
  background-image: url("../../img/icons/system-notification/info.webp");
}
.alert.hide {
  opacity: 0;
  transform: translateX(100%) !important;
  transition: 0.6s ease;
}

.text-block + .alert {
  margin-top: 50px;
}

.control-table .alert {
  margin-top: 50px;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  transform: none;
  position: relative;
  left: unset;
  top: unset;
}

/*
    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.
*/
/*
    ==== WEBSITE CONTROL TABLE ====

    Component description:
        Control table.

    Modificators:
        No modificators.
*/
.control-table {
  padding-top: 32px;
  padding-bottom: 56px;
}
.control-table .breadcrumbs-and-cta {
  display: flex;
  align-items: center;
  -moz-column-gap: 40px;
       column-gap: 40px;
  row-gap: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.control-table .breadcrumbs .subtitle {
  color: #78716C;
  font-size: 1.4rem;
  line-height: 1.7rem;
  margin-top: 4px;
}
.control-table .breadcrumbs .subtitle p {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.control-table .list ul {
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
}
.control-table .list ul li {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: 37px;
  padding-left: 0;
  list-style: none;
  font-size: 2rem;
  line-height: 2.9rem;
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
}
.control-table .list ul li a {
  color: #131313;
}
.control-table .list ul li:not(:last-child):after {
  content: "/";
  position: absolute;
  right: 14px;
  color: #D6D3D1;
}
.control-table .log-out .log-out__inner > * {
  display: flex;
  align-items: center;
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
}
.control-table .log-out .log-out__inner > * img {
  margin-right: 10px;
}
.control-table .breadcrumbs-and-cta + .control-table-menu {
  margin-top: 48px;
}
.control-table .control-table-menu nav ul {
  display: flex;
  padding-left: 0;
  display: inline-flex;
  width: 100%;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.control-table .control-table-menu nav ul.horizontal-scrollbar-visible {
  padding-bottom: 10px;
}
.control-table .control-table-menu nav ul li {
  list-style: none;
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  display: flex;
  flex: 1;
  min-width: -moz-max-content;
  min-width: max-content;
  margin-bottom: 0;
}
.control-table .control-table-menu nav ul li.active-item {
  border-bottom: 2px solid #AA182C;
}
.control-table .control-table-menu nav ul li.active-item a {
  color: #AA182C;
}
.control-table .control-table-menu nav ul li img {
  min-width: 18px;
  margin-right: 10px;
}
.control-table .control-table-menu nav ul li > * {
  background-color: #F5F5F4;
  color: #131313;
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  padding: 14.5px 34.5px;
  font-family: inherit;
  transition: 0.2s ease;
  justify-content: center;
}
.control-table .control-table-menu nav ul li > *:hover {
  background-color: #E1E1E0;
  transition: 0.2s ease;
  text-decoration: none;
}
.control-table .control-table-menu .os-viewport {
  display: inline-flex;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.control-table .control-table-menu .os-scrollbar .os-scrollbar-track {
  margin-top: 2px;
}
.control-table .control-table-menu .os-scrollbar .os-scrollbar-handle {
  height: 2px;
  cursor: grab;
}
.control-table .control-table-menu .os-scrollbar .os-scrollbar-handle:active {
  cursor: grabbing;
}

/*
    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.
*/
/*
    ==== STATUS CIRCLE ====

    Component description:
        Status circle.

    Modificators:
        No modificators.
*/
.status-circle {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 4px solid #D1FAE5;
  background-color: #065F46;
}
.status-circle.green {
  border: 4px solid #D1FAE5;
  background-color: #065F46;
}
.status-circle.red {
  border: 4px solid #FEE2E2;
  background-color: #EF4444;
}
.status-circle.yellow {
  border: 4px solid #f7d9ac;
  background-color: #EE9816;
}
.status-circle.blue {
  border: 4px solid #c2e9ff;
  background-color: #0073b7;
}
.status-circle.purple {
  border: 4px solid #dddcea;
  background-color: #605ca8;
}

/*
    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.type-2 {
  margin-top: 70px;
  margin-bottom: 70px;
}
.pagination.type-2 .text {
  color: #78716C;
  font-size: 1.4rem;
  line-height: 1.8rem;
}
.pagination.type-2 .text .text__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.pagination.type-2 .text .text__inner .input-wrapper {
  margin-bottom: 0 !important;
}
.pagination.type-2 .text .text__inner .per-page-wrapper {
  display: flex;
  align-items: center;
}
.pagination.type-2 .text .text__inner .per-page-wrapper .per-page-label {
  margin-right: 10px;
  color: #131313;
}
.pagination.type-2 .text .text__inner .per-page-wrapper .choices .choices__list--single .choices__item {
  min-width: 27px;
}
.pagination.type-2 .text .text__inner .total {
  color: #131313;
}
.pagination.type-2 .text .text__inner .total .total-value {
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
  display: inline-block;
  margin-left: 5px;
}
.pagination.type-2 .pagination__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding-top: 12px;
  border-top: 1px solid #D6D3D1;
}
.pagination.type-2 .pagination__inner nav {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination.type-2 .pagination__inner ul {
  display: inline-flex;
  padding: 0;
  margin: 0;
  -moz-column-gap: 0;
       column-gap: 0;
}
.pagination.type-2 .pagination__inner ul li {
  width: 28px;
  height: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0;
  border-radius: 4px;
  overflow: hidden;
}
.pagination.type-2 .pagination__inner ul li:not(:last-child) {
  margin-right: 8px;
}
.pagination.type-2 .pagination__inner ul li::before {
  content: none;
}
.pagination.type-2 .pagination__inner ul li a,
.pagination.type-2 .pagination__inner ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
  line-height: 2rem;
  transition: 0.2s ease;
  text-align: center;
  text-decoration: none;
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
  color: #0C0A09;
  border-radius: inherit;
}
.pagination.type-2 .pagination__inner ul li.active {
  background-color: #E7E5E4;
}
.pagination.type-2 .pagination__inner ul li:not(.active):hover {
  background-color: #AA182C;
  color: #FFFFFF;
  transition: 0.2s ease;
}
.pagination.type-2 .pagination__inner ul li:not(.active):hover a,
.pagination.type-2 .pagination__inner ul li:not(.active):hover span {
  color: inherit;
}
.pagination.type-2 .pagination__inner .pagination-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  transition: 0.2s ease;
  overflow: hidden;
}
.pagination.type-2 .pagination__inner .pagination-control .arrow {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.pagination.type-2 .pagination__inner .pagination-control .arrow::before {
  content: "";
  display: block;
  width: 7px;
  height: 14px;
  position: absolute;
  background-image: url("../../img/icons/arrows/arrow-left--black.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}
.pagination.type-2 .pagination__inner .pagination-control img {
  width: 12px;
  height: 11px;
  max-width: unset;
}
.pagination.type-2 .pagination__inner .pagination-control.disabled .arrow::before {
  background-image: url("../../img/icons/arrows/arrow-left--gray.webp");
}
.pagination.type-2 .pagination__inner .pagination-control.next {
  margin-left: 8px;
  transform: rotate(180deg);
}
.pagination.type-2 .pagination__inner .pagination-control.prev {
  margin-right: 8px;
}
.pagination.type-2 .choices {
  color: #131313 !important;
}
.pagination.type-2 .choices .choices__inner {
  padding: 6px 28px 6px 8px !important;
  min-height: 32px;
}
.pagination.type-2 .choices .choices__list--dropdown .choices__item {
  padding: 5px 8px;
  font-size: 1.3rem;
}
.pagination.type-2 .choices .choices__placeholder {
  display: none;
}
.pagination.type-2 .choices .selected-value {
  width: 30px;
  display: inline-block;
  text-align: center;
}

.pagination.type-1 {
  margin-top: 30px;
  margin-bottom: 100px;
}
.pagination.type-1 .pagination__inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination.type-1 .pagination__inner nav {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination.type-1 .pagination__inner ul {
  display: inline-flex;
  padding: 0;
  margin: 0;
  -moz-column-gap: 0;
       column-gap: 0;
}
.pagination.type-1 .pagination__inner ul li:first-child a,
.pagination.type-1 .pagination__inner ul li:last-child a {
  border-color: transparent !important;
}
.pagination.type-1 .pagination__inner ul li {
  width: 48px;
  height: 48px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0;
  border-radius: 12px;
  overflow: hidden;
}
.pagination.type-1 .pagination__inner ul li:not(:last-child) {
  margin-right: 8px;
}
.pagination.type-1 .pagination__inner ul li::before {
  content: none;
}
.pagination.type-1 .pagination__inner ul li a,
.pagination.type-1 .pagination__inner ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.8rem;
  line-height: 2.2rem;
  text-align: center;
  text-decoration: none;
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  color: #0C0A09;
  border-radius: inherit;
  border: 1px solid #D6D3D1;
  transition: 0.2s ease;
}
.pagination.type-1 .pagination__inner ul li.active a,
.pagination.type-1 .pagination__inner ul li.active span {
  border: 1px solid #AA182C;
  color: #AA182C;
}
.pagination.type-1 .pagination__inner ul li.active a {
  color: inherit;
}
.pagination.type-1 .pagination__inner ul li:not(.active):hover a {
  background-color: #AA182C;
  color: #FFFFFF;
  border: 1px solid transparent;
  transition: 0.2s ease;
}
.pagination.type-1 .pagination__inner .pagination-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  transition: 0.2s ease;
  overflow: hidden;
  background-color: #AA182C;
  border-radius: 12px;
  overflow: hidden;
}
.pagination.type-1 .pagination__inner .pagination-control .arrow {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.pagination.type-1 .pagination__inner .pagination-control .arrow::before {
  content: "";
  display: block;
  width: 13px;
  height: 10px;
  position: absolute;
  background-image: url("../../img/icons/arrows/arrow-full--white.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}
.pagination.type-1 .pagination__inner .pagination-control img {
  width: 12px;
  height: 11px;
  max-width: unset;
}
.pagination.type-1 .pagination__inner .pagination-control.disabled {
  background-color: #E7E5E4;
}
.pagination.type-1 .pagination__inner .pagination-control.disabled .arrow::before {
  background-image: url("../../img/icons/arrows/arrow-full--gray.webp");
}
.pagination.type-1 .pagination__inner .pagination-control.prev {
  transform: rotate(180deg);
}

@media (max-width: 575px) {
  .pagination.type-2 .pagination__inner {
    display: block;
    text-align: center;
  }
  .pagination.type-2 .pagination__inner .text {
    margin-bottom: 20px;
  }
  .pagination.type-2 .pagination__inner nav ul {
    justify-content: center;
  }
  .pagination.type-1 .pagination__inner ul li {
    width: 35px;
    height: 35px;
  }
  .pagination.type-1 .pagination__inner ul li a,
  .pagination.type-1 .pagination__inner ul li span {
    font-size: 1.4rem;
    line-height: 1.6rem;
  }
  .pagination.type-1 .pagination__inner .pagination-control {
    width: 35px;
    height: 35px;
  }
}
@media (max-width: 350px) {
  .pagination.type-1 .pagination__inner ul li {
    width: 28px;
    height: 28px;
  }
  .pagination.type-1 .pagination__inner .pagination-control {
    width: 28px;
    height: 28px;
  }
}
/*
    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 SEPARATOR ====

    Component description:
        Section separator.

    Modificators:
        No modificators.
*/
.section-separator .section-separator__inner {
  background-color: #E7E5E4;
  height: 1px;
  width: 100%;
  display: block;
  margin-top: 32px;
  margin-bottom: 32px;
}

/*
    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.
*/
/*
    ==== INNER GRID ====

    Component description:
        This is inner grid that is used accross whole website.
        Grid item (direct child of inner grid) must contain "inner-grid__item" class

    Modificators:
        No modificators.
*/
@media (min-width: 768px) {
  .inner-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: initial;
    flex-wrap: wrap;
  }
  .inner-grid .inner-grid__item {
    flex: 1;
  }
  .inner-grid.items-4 {
    gap: 32px !important;
  }
  .inner-grid.items-4 .inner-grid__item {
    width: calc(25% - 32px);
    min-width: calc(25% - 32px);
  }
  .inner-grid.items-3 {
    gap: 32px !important;
  }
  .inner-grid.items-3 .inner-grid__item {
    width: calc(33% - 32px);
    min-width: calc(33% - 32px);
  }
  .inner-grid.items-2 {
    gap: 32px !important;
  }
  .inner-grid.items-2 .inner-grid__item {
    width: calc(50% - 32px);
    min-width: calc(50% - 32px);
  }
}
@media (max-width: 1200px) {
  .inner-grid.items-4 {
    gap: 32px !important;
  }
  .inner-grid.items-4 .inner-grid__item {
    width: calc(33% - 32px);
    min-width: calc(33% - 32px);
  }
}
@media (max-width: 991px) {
  .inner-grid.items-3, .inner-grid.items-4 {
    gap: 32px !important;
  }
  .inner-grid.items-3 .inner-grid__item, .inner-grid.items-4 .inner-grid__item {
    width: calc(50% - 32px);
    min-width: calc(50% - 32px);
  }
}
@media (max-width: 767px) {
  .inner-grid.items-2 .inner-grid__item, .inner-grid.items-3 .inner-grid__item, .inner-grid.items-4 .inner-grid__item {
    width: 100%;
  }
  .inner-grid.items-2 .inner-grid__item:not(:last-child), .inner-grid.items-3 .inner-grid__item:not(:last-child), .inner-grid.items-4 .inner-grid__item:not(:last-child) {
    margin-bottom: 50px;
  }
}
/*
    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.
*/
/*
    ==== ARTICLES CARD ====

    Component description:
        Atricles card.

    Modificators:
        No modificators.
*/
.articles-card {
  background-color: #FFFFFF;
}
.articles-card .featured-image {
  border-radius: 20px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.articles-card .featured-image img {
  width: 100%;
}
.articles-card .featured-image a {
  display: block;
}
.articles-card .date {
  display: block;
  margin-top: 20px;
  margin-bottom: 8px;
  color: rgba(23, 23, 23, 0.6980392157);
  font-size: 1.4rem;
  line-height: 2rem;
}
.articles-card .content .title h1,
.articles-card .content .title h2,
.articles-card .content .title h3,
.articles-card .content .title h4,
.articles-card .content .title h5,
.articles-card .content .title h6 {
  font-size: 4.4rem;
  line-height: 4.8rem;
  color: #171717;
}
.articles-card .content .title h1 a,
.articles-card .content .title h2 a,
.articles-card .content .title h3 a,
.articles-card .content .title h4 a,
.articles-card .content .title h5 a,
.articles-card .content .title h6 a {
  color: inherit;
}
.articles-card .content .text {
  margin-top: 10px;
  color: rgba(23, 23, 23, 0.6980392157);
  font-size: 1.4rem;
  line-height: 2.4rem;
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
}

@media (max-width: 991px) {
  .articles-card .content .title h1,
  .articles-card .content .title h2,
  .articles-card .content .title h3,
  .articles-card .content .title h4,
  .articles-card .content .title h5,
  .articles-card .content .title h6 {
    font-size: 2.8rem;
    line-height: 3rem;
  }
}
/*
    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.
*/
.sidebar .sidebar__inner > * {
  margin-top: 20px;
  margin-bottom: 20px;
}
.sidebar .sidebar__inner > *:first-child {
  margin-top: 0;
}
.sidebar .sidebar__inner > *:last-child {
  margin-bottom: 0;
}
.sidebar .title {
  font-family: "primary-medium", Arial, Helvetica, sans-serif;
  font-size: 2rem;
  line-height: 3.2rem;
  color: rgba(23, 23, 23, 0.6980392157);
  margin-top: 56px;
  margin-bottom: 20px;
}
.sidebar .title h1,
.sidebar .title h2,
.sidebar .title h3,
.sidebar .title h4,
.sidebar .title h5,
.sidebar .title h6 {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.sidebar.bg-black .title,
.bg-black .sidebar .title {
  color: #FFFFFF;
}

.sidebar.bg-dark-red .title,
.bg-dark-red .sidebar .title {
  color: #FFFFFF;
}

@media (min-width: 1200px) {
  .sidebar {
    min-width: 350px;
    max-width: 350px;
  }
}
/*
    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.
*/
/*
    ==== TAGS LIST   ====

    Component description:
        Tags list.

    Modificators:
        No modificators.
*/
.tags-list .tags-list__inner {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tag {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #171717;
  font-size: 1.6rem;
  line-height: 26px;
  transition: 0.2s ease;
  border: 1px solid #78716C;
  border-radius: 12px;
}
.tag .tag__inner {
  padding: 7px 16px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.tag.active, .tag:hover {
  color: #FFFFFF;
  background-color: #171717;
  transition: 0.2s ease;
  border: 1px solid #171717;
}
.tag.active .tag__inner, .tag:hover .tag__inner {
  text-decoration: none;
}

.tags-list.bg-black .tag,
.bg-black .tags-list .tag {
  color: #FFFFFF;
  border-color: #FFFFFF;
}
.tags-list.bg-black .tag.active, .tags-list.bg-black .tag:hover,
.bg-black .tags-list .tag.active,
.bg-black .tags-list .tag:hover {
  background-color: #FFFFFF;
  color: #131313;
}

.tags-list.bg-dark-red .tag,
.bg-dark-red .tags-list .tag {
  color: #FFFFFF;
  border-color: #FFFFFF;
}
.tags-list.bg-dark-red .tag.active, .tags-list.bg-dark-red .tag:hover,
.bg-dark-red .tags-list .tag.active,
.bg-dark-red .tags-list .tag:hover {
  background-color: #FFFFFF;
  color: #131313;
}

/*
    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.
*/
/*
    ==== NEWS LIST ====

    Component description:
        News list (sidebar).

    Modificators:
        No modificators.
*/
.news-list .news .news__date {
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: rgba(23, 23, 23, 0.6980392157);
  margin-bottom: 2px;
}
.news-list .news .news__title h1,
.news-list .news .news__title h2,
.news-list .news .news__title h3,
.news-list .news .news__title h4,
.news-list .news .news__title h5,
.news-list .news .news__title h6,
.news-list .news .news__title a {
  font-size: 1.8rem;
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
  line-height: 2.8rem;
  color: inherit;
}
.news-list .news + .news {
  margin-top: 32px;
}

.news-list.bg-black .news__date,
.bg-black .news-list .news__date {
  color: #FFFFFF;
}

.news-list.bg-dark-red .news__date,
.bg-dark-red .news-list .news__date {
  color: #FFFFFF;
}

/*
    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:
        Breadcrumbs.

    Modificators:
        No modificators.
*/
.breadcrumbs .subtitle {
  color: #78716C;
  font-size: 1.4rem;
  line-height: 1.7rem;
  margin-top: 4px;
}
.breadcrumbs .subtitle p {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.breadcrumbs .list ul {
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
}
.breadcrumbs .list ul li {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: 37px;
  padding-left: 0;
  list-style: none;
  font-size: 2rem;
  line-height: 2.9rem;
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
  margin-bottom: 0;
}
.breadcrumbs .list ul li:last-child {
  padding-right: 0;
}
.breadcrumbs .list ul li a {
  color: #131313;
}
.breadcrumbs .list ul li:not(:last-child):after {
  content: "/";
  position: absolute;
  right: 14px;
  color: #D6D3D1;
}

/* Breadcrumbs with arrow */
.breadcrumbs.with-arrow ul li {
  font-size: initial;
  padding-right: 25px;
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
}
.breadcrumbs.with-arrow ul li a {
  color: #AA182C;
}

.breadcrumbs.with-arrow ul li:not(:last-child)::after {
  content: "";
  display: inline-block;
  background-image: url("../../img/icons/arrows/arrow-full--black.webp");
  background-repeat: no-repeat;
  background-size: cover;
  vertical-align: middle;
  width: 10px;
  height: 8px;
  right: 8px;
  color: #131313;
}

/*
    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.
*/
/*
    ==== SOCIALS ====

    Component description:
        Socials.

    Modificators:
        No modificators.
*/
.socials img {
  border-radius: 0 !important;
}
.socials:not(:first-child) {
  margin-top: 56px;
}
.socials .socials__title {
  font-size: 1.4rem;
  line-height: 2.4rem;
  color: #171717;
  margin-bottom: 8px;
}
.socials .socials__wrapper {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.socials .social {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #E7E5E4;
  transition: 0.2s ease;
}
.socials .social:hover {
  opacity: 0.8;
  transition: 0.2s ease;
}
.socials .social a {
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.socials.bg-black .socials__title,
.bg-black .socials .socials__title {
  color: #FFFFFF;
}

.socials.bg-dark-red .socials__title,
.bg-dark-red .socials .socials__title {
  color: #FFFFFF;
}

/*
    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.
*/
/*
    ==== TOOLTIP ====

    Component description:
        Tooltip.

    Modificators:
        No modificators.
*/
@starting-style {
  .tooltip .tooltip-content {
    display: none;
  }
}
.tooltip {
  position: relative;
  display: inline-flex;
  font-size: 0;
}
.tooltip.status .tooltip-content {
  left: -8px;
  transform: none;
}
.tooltip.status .tooltip-content::before {
  left: 8px;
  transform: none;
}
.tooltip.flip .tooltip-content {
  bottom: unset;
  top: calc(100% + 15px);
  box-shadow: 10px 0px 20.5px 1.5px rgba(0, 0, 0, 0.15);
}
.tooltip.flip .tooltip-content::before {
  border-bottom: 10px solid #131313;
  border-top: none;
  top: -10px;
  bottom: unset;
}
.tooltip .tooltip-content {
  display: none;
  opacity: 0;
  z-index: -1;
  position: absolute;
  min-width: calc(100% + 200px);
  bottom: calc(100% + 15px);
  left: 50%;
  padding: 10px 15px;
  background-color: #131313;
  transform: translateX(-50%);
  transition: 0.2s ease;
  font-size: 1.2rem;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 7px;
  color: #FFFFFF;
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
  text-transform: none;
  box-shadow: 0px 5px 9.5px 0.5px rgba(0, 0, 0, 0.05);
}
.tooltip .tooltip-content p {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}
.tooltip .tooltip-content *:first-child {
  margin-top: 0;
}
.tooltip .tooltip-content *:last-child {
  margin-bottom: 0;
}
.tooltip .tooltip-content::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #131313;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
}
.tooltip .tooltip-content.active {
  opacity: 1;
  z-index: 2;
  transition: 0.2s ease;
  display: block;
}
.tooltip .tooltip-content .title {
  margin-bottom: 10px;
}
.tooltip.hoverable:hover .tooltip-content, .tooltip.active .tooltip-content {
  opacity: 1;
  z-index: 3;
  transition: 0.2s ease;
  display: block;
}
.tooltip .tooltip-btn {
  padding: 0;
  background: transparent;
  line-height: 0;
  font-size: 0;
  border: none;
  min-width: 20px;
  min-height: 20px;
  cursor: pointer;
}
.tooltip .button-wrapper {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}
.tooltip .inner-tooltip-button {
  padding: 5px 12px !important;
  font-size: 1.4rem !important;
  line-height: 1.6rem !important;
  text-decoration: none;
}

.tooltip.tooltip--interpreter-status .tooltip-btn {
  font-size: 1.4rem;
  line-height: 1.6rem;
}

.tooltip.tooltip--interpreter-status .tooltip-content {
  text-align: left;
  width: 300px;
  left: 0;
  transform: none;
  min-width: unset;
  max-width: calc(100vw - 60px);
  font-size: 1.2rem;
  line-height: 1.5rem;
}
.tooltip.tooltip--interpreter-status .tooltip-content::before {
  left: 20px;
  transform: none;
}

.tooltip.tooltip-to-right .tooltip-content {
  left: unset;
  right: 0;
}
.tooltip.tooltip-to-right .tooltip-content::before {
  left: unset;
  right: 20px;
}

.label-and-tooltip-wrapper {
  display: flex;
  align-items: center;
}
.label-and-tooltip-wrapper label {
  margin-right: 10px;
}

.participation-type .tooltip .tooltip-content,
.publication-date .tooltip .tooltip-content,
.interpreter-status .tooltip .tooltip-content,
.proof-of-participation .tooltip .tooltip-content {
  text-align: left;
  width: 300px;
  left: -22px;
  transform: none;
  min-width: unset;
  max-width: calc(100vw - 60px);
  font-size: 1.2rem;
  line-height: 1.5rem;
}
.participation-type .tooltip .tooltip-content::before,
.publication-date .tooltip .tooltip-content::before,
.interpreter-status .tooltip .tooltip-content::before,
.proof-of-participation .tooltip .tooltip-content::before {
  left: 20px;
  transform: none;
}
.participation-type .tooltip .tooltip-btn,
.publication-date .tooltip .tooltip-btn,
.interpreter-status .tooltip .tooltip-btn,
.proof-of-participation .tooltip .tooltip-btn {
  min-width: 16px;
  min-height: 16px;
}

.proof-of-participation .tooltip .tooltip-content {
  left: unset;
  right: -22px;
}
.proof-of-participation .tooltip .tooltip-content::before {
  left: unset;
  right: 20px;
  transform: none;
}

@media (max-width: 575px) {
  .tooltip {
    min-width: unset !important;
  }
  .participation-type .tooltip .tooltip-content,
  .publication-date .tooltip .tooltip-content,
  .interpreter-status .tooltip .tooltip-content {
    width: 200px;
  }
}
/*
    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.
*/
/*
    ==== DATEPICKER ====

    Component description:
        Datepicker.

    Modificators:
        No modificators.
*/
.datepicker {
  min-width: 100%;
  max-width: 250px;
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
}
.datepicker .datepicker-view {
  width: 100%;
}
.datepicker button {
  font-family: "primary-regular", Arial, Helvetica, sans-serif;
}
.datepicker .datepicker-header {
  margin-bottom: 10px;
}
.datepicker .datepicker-main {
  padding: 10px;
}
.datepicker .datepicker-controls {
  padding: 0;
}
.datepicker .datepicker-controls button {
  background-color: #AA182C;
  color: #FFFFFF;
}
.datepicker .dow {
  font-size: 1.6rem;
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
  line-height: 1.7rem;
  font-weight: normal;
}
.datepicker .days-of-week {
  margin-bottom: 10px;
}
.datepicker .datepicker-cell {
  height: 3rem;
}
.datepicker .datepicker-cell.selected {
  font-family: "primary-semi-bold", Arial, Helvetica, sans-serif;
  font-weight: normal;
  background-color: #131313;
}
.datepicker .datepicker-cell:not(.disabled):not(.selected):not(.focused):hover {
  background-color: #F5F5F4;
  cursor: pointer;
}
.datepicker .datepicker-cell.focused:not(.selected) {
  background-color: #002A95;
  color: #FFFFFF;
}

.folders-wrapper {
  margin: 20px 0;
}
.folders-wrapper ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.folders-wrapper ul li {
  margin-bottom: 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.
*/
/*
    ==== POPUP ====

    Component description:
        Website popups.

    Modificators:
        No modificators.
*/
.popup {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  width: 100%;
  height: 100dvh;
  overflow-y: scroll;
}
.popup .container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: unset;
}
.popup.active {
  display: block;
  position: fixed;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.popup.active::-webkit-scrollbar {
  display: none;
}
.popup .popup-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000000;
  opacity: 0.6;
  z-index: -1;
  height: 100%;
  width: 100%;
}
.popup .popup__inner {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  max-width: 100%;
  margin: 2% auto;
  background-color: #FFFFFF;
  padding: 50px;
  overflow: hidden;
  animation-name: slideIn;
  animation-duration: 0.6s;
  border-radius: 20px;
}
.popup .popup__inner::-webkit-scrollbar {
  display: none;
}
.popup .popup__inner button.close-container__wrapper.close-popup {
  border-radius: 0px;
}
.popup .popup__inner .close-container__wrapper {
  min-width: unset;
  border: none;
  padding: 0;
  position: absolute;
  right: 5px;
  top: 0;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  cursor: pointer;
  background: none;
}
.popup .popup__inner .close-container {
  font-size: 0;
  width: 25px;
  height: 25px;
}
.popup .content {
  display: flex;
  justify-content: center;
}
.popup img.greeting-card-banner {
  max-height: calc(80vh - 50px);
}

@media (max-width: 767px) {
  .popup .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }
  .popup .container {
    padding-left: 0;
    padding-right: 0;
    max-width: unset !important;
  }
  .popup .popup__inner {
    margin: 0;
    border-radius: 0;
    min-height: 100dvh;
    padding: 20px;
  }
}
@media (max-width: 360px) {
  .popup .popup__inner .close-container__wrapper {
    width: unset;
    height: unset;
  }
  .popup .popup__inner .close-container__wrapper .close-container {
    width: 22px;
    height: 22px;
  }
}
@keyframes slideIn {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
/* 
	==== 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;
}

@media (max-width: 767px) {
  .padding-bottom-50 {
    padding-bottom: 25px !important;
  }
  .padding-top-50 {
    padding-top: 25px !important;
  }
  .padding-bottom-100 {
    padding-bottom: 50px !important;
  }
  .padding-top-100 {
    padding-top: 50px !important;
  }
  .padding-bottom-150 {
    padding-bottom: 75px !important;
  }
  .padding-top-150 {
    padding-top: 75px !important;
  }
  .padding-bottom-200 {
    padding-bottom: 100px !important;
  }
  .padding-top-200 {
    padding-top: 100px !important;
  }
  .margin-bottom-50 {
    margin-bottom: 25px !important;
  }
  .margin-top-50 {
    margin-top: 25px !important;
  }
  .margin-bottom-100 {
    margin-bottom: 50px !important;
  }
  .margin-top-100 {
    margin-top: 50px !important;
  }
  .margin-bottom-150 {
    margin-bottom: 75px !important;
  }
  .margin-top-150 {
    margin-top: 75px !important;
  }
  .margin-bottom-200 {
    margin-bottom: 100px !important;
  }
  .margin-top-200 {
    margin-top: 100px !important;
  }
}
/*
    ==== DESKTOP SPACING ====

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

    Modificators:
        No modificators.
*/
@media (min-width: 992px) {
  .padding-top-0--desktop {
    padding-top: 0 !important;
  }
  .padding-bottom-0--desktop {
    padding-bottom: 0 !important;
  }
  .padding-top-50--desktop {
    padding-top: 50px !important;
  }
  .padding-bottom-50--desktop {
    padding-bottom: 50px !important;
  }
  .padding-top-100--desktop {
    padding-top: 100px !important;
  }
  .padding-bottom-100--desktop {
    padding-bottom: 100px !important;
  }
  .padding-top-150--desktop {
    padding-top: 150px !important;
  }
  .padding-bottom-150--desktop {
    padding-bottom: 150px !important;
  }
  .padding-top-200--desktop {
    padding-top: 200px !important;
  }
  .padding-bottom-200--desktop {
    padding-bottom: 200px !important;
  }
  .margin-top-0--desktop {
    margin-top: 0 !important;
  }
  .margin-bottom-0--desktop {
    margin-bottom: 0 !important;
  }
  .margin-top-50--desktop {
    margin-top: 50px !important;
  }
  .margin-bottom-50--desktop {
    margin-bottom: 50px !important;
  }
  .margin-top-100--desktop {
    margin-top: 100px !important;
  }
  .margin-bottom-100--desktop {
    margin-bottom: 100px !important;
  }
  .margin-top-150--desktop {
    margin-top: 150px !important;
  }
  .margin-bottom-150--desktop {
    margin-bottom: 150px !important;
  }
  .margin-top-200--desktop {
    margin-top: 200px !important;
  }
  .margin-bottom-200--desktop {
    margin-bottom: 200px !important;
  }
}
/*
    ==== TABLET SPACING ====

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

    Modificators:
        No modificators.
*/
@media (min-width: 576px) and (max-width: 991px) {
  .padding-top-0--tablet {
    padding-top: 0 !important;
  }
  .padding-bottom-0--tablet {
    padding-bottom: 0 !important;
  }
  .padding-top-50--tablet {
    padding-top: 50px !important;
  }
  .padding-bottom-50--tablet {
    padding-bottom: 50px !important;
  }
  .padding-top-100--tablet {
    padding-top: 100px !important;
  }
  .padding-bottom-100--tablet {
    padding-bottom: 100px !important;
  }
  .padding-top-150--tablet {
    padding-top: 150px !important;
  }
  .padding-bottom-150--tablet {
    padding-bottom: 150px !important;
  }
  .padding-top-200--tablet {
    padding-top: 200px !important;
  }
  .padding-bottom-200--tablet {
    padding-bottom: 200px !important;
  }
  .margin-top-0--tablet {
    margin-top: 0 !important;
  }
  .margin-bottom-0--tablet {
    margin-bottom: 0 !important;
  }
  .margin-top-50--tablet {
    margin-top: 50px !important;
  }
  .margin-bottom-50--tablet {
    margin-bottom: 50px !important;
  }
  .margin-top-100--tablet {
    margin-top: 100px !important;
  }
  .margin-bottom-100--tablet {
    margin-bottom: 100px !important;
  }
  .margin-top-150--tablet {
    margin-top: 150px !important;
  }
  .margin-bottom-150--tablet {
    margin-bottom: 150px !important;
  }
  .margin-top-200--tablet {
    margin-top: 200px !important;
  }
  .margin-bottom-200--tablet {
    margin-bottom: 200px !important;
  }
}
/*
    ==== MOBILE SPACING ====

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

    Modificators:
        No modificators.
*/
@media (max-width: 575px) {
  .padding-top-0--mobile {
    padding-top: 0 !important;
  }
  .padding-bottom-0--mobile {
    padding-bottom: 0 !important;
  }
  .padding-top-50--mobile {
    padding-top: 50px !important;
  }
  .padding-bottom-50--mobile {
    padding-bottom: 50px !important;
  }
  .padding-top-100--mobile {
    padding-top: 100px !important;
  }
  .padding-bottom-100--mobile {
    padding-bottom: 100px !important;
  }
  .padding-top-150--mobile {
    padding-top: 150px !important;
  }
  .padding-bottom-150--mobile {
    padding-bottom: 150px !important;
  }
  .padding-top-200--mobile {
    padding-top: 200px !important;
  }
  .padding-bottom-200--mobile {
    padding-bottom: 200px !important;
  }
  .margin-top-0--mobile {
    margin-top: 0 !important;
  }
  .margin-bottom-0--mobile {
    margin-bottom: 0 !important;
  }
  .margin-top-50--mobile {
    margin-top: 50px !important;
  }
  .margin-bottom-50--mobile {
    margin-bottom: 50px !important;
  }
  .margin-top-100--mobile {
    margin-top: 100px !important;
  }
  .margin-bottom-100--mobile {
    margin-bottom: 100px !important;
  }
  .margin-top-150--mobile {
    margin-top: 150px !important;
  }
  .margin-bottom-150--mobile {
    margin-bottom: 150px !important;
  }
  .margin-top-200--mobile {
    margin-top: 200px !important;
  }
  .margin-bottom-200--mobile {
    margin-bottom: 200px !important;
  }
}