Add the original SASS to the build workflow.

11 files changed, 566 insertions, 654 deletions

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index c2d5161..f76d0c1 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -26,7 +26,8 @@ jobs:
       run: |
         echo Installing build dependencies
         sudo apt-get update
-        sudo apt-get -y install cmark make python3-boto3 python3-jinja2
+        sudo apt-get -y install cmark make python3-boto3 python3-jinja2 npm
+        sudo npm install -g sass
 
     - name: Install soupault
       env:
@@ -45,6 +46,11 @@ jobs:
         SOUPAULT_OPTS: "--profile live"
       run: |
         make all
+
+    - name: Build CSS
+      run:
+        mkdir -p build/css/
+        sass -I sass/ sass/main.sass > build/css/main.css
         
     - name: Deploy to Netlify
       env:
diff --git a/sass/fonts.sass b/sass/fonts.sass
new file mode 100644
index 0000000..8875af9
--- /dev/null
+++ b/sass/fonts.sass
@@ -0,0 +1,24 @@
+

+@font-face

+  font-family: 'Lato'

+  font-style: normal

+  font-weight: 400

+  font-display: swap

+  src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/lato-regular.woff2') format('woff2')

+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

+

+@font-face

+  font-family: 'Lato'

+  font-style: normal

+  font-weight: 700

+  font-display: swap

+  src: local('Lato Bold'), local('Lato-Bold'), url('../fonts/lato-bold.woff2') format('woff2')

+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

+

+@font-face

+  font-family: 'Lato'

+  font-style: normal

+  font-weight: 900

+  font-display: swap

+  src: local('Lato Black'), local('Lato-Black'), url('../fonts/lato-black.woff2') format('woff2')

+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD

diff --git a/sass/footer.sass b/sass/footer.sass
new file mode 100644
index 0000000..d386160
--- /dev/null
+++ b/sass/footer.sass
@@ -0,0 +1,161 @@
+@import settings.sass

+  

+footer

+  div.footer__inner

+    

+    div.footer__logo-society

+      display: grid

+      grid-template-columns: 60px 1fr 191px

+      grid-gap: 25px

+      align-items: center

+      +resp(sm)

+        display: none

+      div.footer__hr

+        align-self: center

+        img

+          margin-bottom: 10px

+          width: 100%

+          +resp(md)

+            border-bottom: 1px solid #E0DFDF

+      div.footer__socials

+        display: flex

+        justify-content: space-between

+        align-items: center

+        padding-left: 6px

+

+    div.footer__links-trustpilot

+      display: flex

+      justify-content: space-between

+      margin-top: 36px

+      +resp(sm)

+        display: none

+

+      div.footer__links

+        display: flex

+        +resp(md)

+          flex-wrap: wrap

+

+        div.footer__column

+          display: grid

+          grid-template-rows: 50px 1fr

+          margin-right: 80px

+          &:last-child

+            margin-right: 0

+          +resp(lg)

+            margin-right: 32px

+          +resp(md)

+            width: 50%

+            margin: 0 0 30px

+            grid-template-rows: 34px 1fr

+          h3.footer__links-title

+            font-weight: 600

+            font-size: 21px

+            color: $black

+            +resp(lg)

+              line-height: 50px

+            +resp(md)

+              line-height: 150%

+              font-size: 16px

+              margin-bottom: 0px

+

+          ul.footer__links-item

+            padding-left: 0

+            list-style: none

+            a

+              list-style: none

+              font-family: $lato

+              font-weight: normal

+              font-size: 16px

+              line-height: 230%

+              color: #747577

+              text-decoration: none

+              +resp(md)

+                font-size: 14px

+              &:hover

+                color: $orange

+                text-decoration: underline

+

+      div.footer__trustpilot

+        justify-self: end

+        border-left: 1px solid #E0DFDF

+        padding-left: 33px

+        +resp(lg)

+          padding-left: 10px

+        div#tp-widget-wrapper

+          margin: 0

+

+    div.footer__developer

+      border-top: 1px solid #E0DFDF

+      display: flex

+      justify-content: space-between

+      align-items: center

+      padding: 40px 0

+      margin-top: 37px

+      +resp(sm)

+        display: none

+      div.footer__hosted

+        display: flex

+        align-items: center

+        p

+          font-family: $lato

+          font-weight: normal

+          font-size: 13px

+          line-height: 16px

+          color: #ACACAD

+          padding-right: 16px

+          +resp(md)

+            padding-right: 8px

+            display: none

+      div.footer__rights

+        display: flex

+        p, a

+          font-family: $lato

+          font-weight: normal

+          font-size: 15px

+          line-height: 150%

+          text-decoration: none

+          color: #ACACAD

+          padding-right: 30px

+          +resp(md)

+            font-size: 14px

+            padding-right: 22px

+        a:hover

+          text-decoration: underline

+          color: $orange

+

+    div.footer__sm

+      display: none

+      +resp(sm)

+        display: block

+      

+      div.footer__sm__contant

+        border-top: 1px solid #ACACAD

+        padding: 32px 0 23px

+        div.footer__sm__logos

+          display: flex

+          justify-content: space-between

+          align-items: center

+        div.footer__sm__society

+          max-width: 200px

+          margin: 24px auto 17px

+          display: flex

+          justify-content: space-between

+        div.footer__sm__developer

+          p, a

+            font-family: $lato

+            font-weight: normal

+            font-size: 13px

+            line-height: 16px

+            color: #747577

+            opacity: 0.5

+          div.footer__sm__privacy-policy

+            display: flex

+            justify-content: center

+            margin-bottom: 19px

+            a

+              text-decoration: none

+              transition: 0.3s

+              &:hover

+                text-decoration: underline

+              &:first-child

+                margin-right: 20px
\ No newline at end of file
diff --git a/sass/front-page/banner.sass b/sass/front-page/banner.sass
new file mode 100644
index 0000000..c243d03
--- /dev/null
+++ b/sass/front-page/banner.sass
@@ -0,0 +1,71 @@
+@import settings.sass

+  

+section.banner

+  background-image: url("/img/front-page/banner/banner-bg.svg")

+  background-position: bottom

+  background-repeat: no-repeat

+  background-size: cover

+  padding: 77px 0 87px

+  +resp(sm)

+    background-image: url("/img/front-page/banner/banner-bg-sm.svg")

+    padding: 45px 0 0

+  div.sm-none

+    +resp(sm)

+      padding: 0

+  div.banner__text-button

+    max-width: 50%

+    +resp(lg)

+      max-width: 61%

+    +resp(sm)

+      margin-bottom: 23px

+      max-width: 100%

+    h1.banner__title

+      font-family: $lato

+      font-weight: 800

+      font-size: 45px

+      line-height: 120%

+      letter-spacing: 0.02em

+      color: $black

+      padding-bottom: 57px

+      +resp(sm)

+        font-size: 38px

+        text-align: center

+        padding-bottom: 51%

+        padding-left: 20px

+        padding-right: 20px

+      +resp(esm)

+        font-size: 28px

+    div.banner__btn_container

+      +resp(sm)

+        background-color: $white

+        display: flex

+        justify-content: center

+        padding-left: 20px

+        padding-right: 20px

+      a.banner__btn

+        max-width: 311px

+        width: 100%

+        height: 58px

+        background: $black

+        border: 1px solid $black

+        display: inline-flex

+        margin-top: 23px

+        align-items: center

+        justify-content: center

+        font-family: $lato

+        font-weight: 900

+        font-size: 16px

+        line-height: 15px

+        color: $white

+        text-decoration: none

+        transition: 0.3s

+        +resp(sm)

+          height: 38px

+          font-size: 14px

+          // margin-left: auto

+          // margin-right: auto

+          // margin-top: 50px

+          // position: absolute

+        &:hover

+          background: $white

+          color: $black
\ No newline at end of file
diff --git a/sass/front-page/bottom-text.sass b/sass/front-page/bottom-text.sass
new file mode 100644
index 0000000..e8aee16
--- /dev/null
+++ b/sass/front-page/bottom-text.sass
@@ -0,0 +1,19 @@
+@import settings.sass

+

+section.bottom-text

+  div.bottom-text__inner

+    padding: 138px 0 182px

+    max-width: 657px

+    margin-left: auto

+    margin-right: auto

+    +resp(lg)

+      padding: 138px 250px 182px

+    +resp(md)

+      padding: 90px 50px 126px

+    +resp(sm)

+      padding: 56px 50px 64px

+    +resp(esm)

+      padding: 56px 20px 64px

+    h2.bottom-text__title

+      text-align: center

+      padding-bottom: 25px
\ No newline at end of file
diff --git a/sass/front-page/inform-columns.sass b/sass/front-page/inform-columns.sass
new file mode 100644
index 0000000..68930df
--- /dev/null
+++ b/sass/front-page/inform-columns.sass
@@ -0,0 +1,81 @@
+@import settings.sass

+

+section.inform-columns

+  div.inform-column__inner

+    display: grid

+    grid-template-columns: 1fr 1fr

+    grid-gap: 23px 30px

+    +resp(lg)

+      grid-gap: 20px

+      +resp(sm)

+        grid-template-columns: 1fr

+        

+    div.inform-column__item

+      background: #F3F4F4

+      display: grid

+      grid-template-rows: auto 1fr auto

+      grid-gap: 40px

+      padding: 48px 54px 59px

+      +resp(md)

+        padding: 30px 25px

+      +resp(sm)

+        padding: 30px 24px 40px

+        grid-gap: 15px

+        grid-template-rows: auto 1fr 65px

+      

+      div.inform-column__header

+        display: flex

+        align-items: center

+        div.inform-column__icon

+          padding-right: 19px

+        div.inform-column__title

+          h3

+            font-family: $lato

+            font-weight: bold

+            font-size: 28px

+            line-height: 150%

+            letter-spacing: 0.02em

+            color: #000000

+            +resp(sm)

+              font-size: 21px

+      

+      div.inform-column__data

+        p

+          text-align: left

+          margin-bottom: 29px

+          font-size: 16px

+          &:last-child

+            margin-bottom: 10px

+            +resp(sm)

+              margin-bottom: 0

+          +resp(sm)

+            line-height: 180%

+            font-size: 14px

+            margin-bottom: 25px

+      

+      div.inform-column__button

+        +resp(sm)

+          align-self: end

+        a.inform-column__btn

+          max-width: 311px

+          width: 100%

+          height: 58px

+          display: flex

+          align-items: center

+          justify-content: center

+          background: $orange

+          border: 1px solid $orange

+          font-family: $lato

+          font-weight: 900

+          font-size: 16px

+          line-height: 15px

+          color: $black

+          text-decoration: none

+          transition: 0.3s

+          +resp(sm)

+            height: 38px

+            width: 100%

+            font-size: 14px

+            line-height: 96%

+          &:hover

+            background: $white
\ No newline at end of file
diff --git a/sass/front-page/main-text.sass b/sass/front-page/main-text.sass
new file mode 100644
index 0000000..54e0786
--- /dev/null
+++ b/sass/front-page/main-text.sass
@@ -0,0 +1,13 @@
+@import settings.sass

+  

+section.main-text

+  max-width: 884px

+  margin-left: auto

+  margin-right: auto

+  padding: 143px 0

+  +resp(lg)

+    padding: 143px 0

+  +resp(md)

+    padding: 90px 0

+  +resp(sm)

+    padding: 34px 0 64px
\ No newline at end of file
diff --git a/sass/header.sass b/sass/header.sass
new file mode 100644
index 0000000..c409dab
--- /dev/null
+++ b/sass/header.sass
@@ -0,0 +1,103 @@
+@import settings.sass

+  

+header

+  background: $white

+  box-shadow: 0px 5px 20px rgba(0, 56, 79, 0.07)

+  padding: 20px 0

+  position: relative

+  +resp(md)

+    padding: 15px 0

+    position: sticky

+    top: 0

+    z-index: 2

+  +resp(esm)

+    padding: 10px 0

+

+  div.header__inner

+    display: flex

+    justify-content: space-between

+    +resp(sm)

+      align-items: center

+    

+    div.header__logo-side

+      display: flex

+      align-items: center

+      a.header__logo

+        display: inherit

+        margin-right: 30px

+        +resp(lg)

+          margin-right: 16px

+      div.header__text

+        font-family: $lato

+        font-weight: 500

+        font-size: 16px

+        line-height: 25px

+        +resp(sm)

+          display: none

+        p

+          font-size: 16px

+          color: #ACACAD

+          text-align: left

+          +resp(md)

+            display: none

+

+    div.header__links-side

+      display: grid

+      grid-template-columns: 1fr auto auto auto

+      grid-gap: 31px

+      justify-items: center

+      align-items: center

+      +resp(lg)

+        grid-gap: 20px

+        text-align: center

+      +resp(sm)

+        display: none

+      a

+        font-family: $lato

+        font-weight: 600

+        font-size: 15px

+        line-height: 14px

+        text-transform: uppercase

+        text-decoration: none

+        color: $black

+        transition: 0.3s

+        +resp(lg)

+          font-size: 14px

+        &:hover

+          color: $orange

+

+    div.header__mobile-menu__buttons

+      height: 100%

+      width: 30px

+      justify-content: center

+      display: none

+      +resp(sm)

+        display: flex

+      img

+        cursor: pointer

+        display: none

+      img.active

+        display: block

+

+nav#mobile-menu

+  z-index: 1

+  bottom: 0

+  top: 0

+  right: 0

+  position: fixed

+  left: 100%

+  background-color: $white

+  padding: 70px 15px

+  +resp(esm)

+    padding: 60px 15px

+  a

+    display: block

+    text-transform: uppercase

+    color: $black

+    text-decoration: none

+    padding: 15px 0

+    font-weight: 600

+    transition: 0.3s

+    border-bottom: 1px solid #e0e0e0

+    &:hover

+      color: $orange
\ No newline at end of file
diff --git a/sass/main.sass b/sass/main.sass
new file mode 100644
index 0000000..53de465
--- /dev/null
+++ b/sass/main.sass
@@ -0,0 +1,40 @@
+@import settings.sass

+@import fonts.sass

+

+body

+  font-family: $lato, sans-serif

+  margin: 0

+  color: $black

+

+h1, h2, h3, h4, h5, p, ul, li

+  margin: 0

+

+h2

+  font-family: $lato

+  font-weight: 800

+  font-size: 38px

+  line-height: 140%

+  +resp(sm)

+    font-size: 24px

+p

+  font-family: $lato

+  font-weight: normal

+  font-size: 18px

+  line-height: 180%

+  text-align: center

+  color: $black

+  +resp(sm)

+    font-size: 14px

+

+div.container

+  max-width: 1340px

+  margin: 0 auto

+  padding-left: 15px

+  padding-right: 15px

+

+@import header.sass

+@import front-page/banner.sass

+@import front-page/main-text.sass

+@import front-page/inform-columns.sass

+@import front-page/bottom-text.sass

+@import footer.sass
\ No newline at end of file
diff --git a/sass/settings.sass b/sass/settings.sass
new file mode 100644
index 0000000..136578d
--- /dev/null
+++ b/sass/settings.sass
@@ -0,0 +1,47 @@
+// fonts

+$lato : "Lato", "Arial", sans-serif

+// colors

+$white : #ffffff

+$orange : #FFBE12

+$black : #18191C

+$grey : #747577

+$dark-orange: #FD8F01

+

+// mixins

+@mixin resp($media)

+	// 1200px and up

+	@if $media == xlg

+		@media only screen and (min-width: 1200px)

+			@content

+	// 1400px and down

+	@if $media == elg

+		@media only screen and (max-width: 1400px)

+			@content

+	// 1199px and down

+	@if $media == lg

+		@media only screen and (max-width: 1199px)

+			@content

+	// 991px and down

+	@else if $media == md

+		@media only screen and (max-width: 991px)

+			@content

+	// 767px and down

+	@else if $media == sm

+		@media only screen and (max-width: 767px)

+			@content

+	// 575px and down

+	@else if $media == esm

+		@media only screen and (max-width: 575px)

+			@content

+	// 450px and down

+	@else if $media == usm

+		@media only screen and (max-width: 450px)

+			@content

+	// 390px and down

+	@else if $media == xsm

+		@media only screen and (max-width: 390px)

+			@content

+	// 350px and down

+	@else if $media == exsm

+		@media only screen and (max-width: 350px)

+			@content
\ No newline at end of file
diff --git a/site/css/main.css b/site/css/main.css
deleted file mode 100644
index 6ee168b..0000000
--- a/site/css/main.css
+++ /dev/null
@@ -1,653 +0,0 @@
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local("Lato Regular"), local("Lato-Regular"), url("../fonts/lato-regular.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
-
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local("Lato Bold"), local("Lato-Bold"), url("../fonts/lato-bold.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
-
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local("Lato Black"), local("Lato-Black"), url("../fonts/lato-black.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
-
-body {
-  font-family: "Lato", "Arial", sans-serif, sans-serif;
-  margin: 0;
-  color: #18191C; }
-
-h1, h2, h3, h4, h5, p, ul, li {
-  margin: 0; }
-
-h2 {
-  font-family: "Lato", "Arial", sans-serif;
-  font-weight: 800;
-  font-size: 38px;
-  line-height: 140%; }
-  @media only screen and (max-width: 767px) {
-    h2 {
-      font-size: 24px; } }
-
-p {
-  font-family: "Lato", "Arial", sans-serif;
-  font-weight: normal;
-  font-size: 18px;
-  line-height: 180%;
-  text-align: center;
-  color: #18191C; }
-  @media only screen and (max-width: 767px) {
-    p {
-      font-size: 14px; } }
-
-div.container {
-  max-width: 1340px;
-  margin: 0 auto;
-  padding-left: 15px;
-  padding-right: 15px; }
-
-header {
-  background: #ffffff;
-  -webkit-box-shadow: 0px 5px 20px rgba(0, 56, 79, 0.07);
-          box-shadow: 0px 5px 20px rgba(0, 56, 79, 0.07);
-  padding: 20px 0;
-  position: relative; }
-  @media only screen and (max-width: 991px) {
-    header {
-      padding: 15px 0;
-      position: -webkit-sticky;
-      position: sticky;
-      top: 0;
-      z-index: 2; } }
-  @media only screen and (max-width: 575px) {
-    header {
-      padding: 10px 0; } }
-  header div.header__inner {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-        -ms-flex-pack: justify;
-            justify-content: space-between; }
-    @media only screen and (max-width: 767px) {
-      header div.header__inner {
-        -webkit-box-align: center;
-        -webkit-align-items: center;
-            -ms-flex-align: center;
-                align-items: center; } }
-    header div.header__inner div.header__logo-side {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-align: center;
-      -webkit-align-items: center;
-          -ms-flex-align: center;
-              align-items: center; }
-      header div.header__inner div.header__logo-side a.header__logo {
-        display: inherit;
-        margin-right: 30px; }
-        @media only screen and (max-width: 1199px) {
-          header div.header__inner div.header__logo-side a.header__logo {
-            margin-right: 16px; } }
-      header div.header__inner div.header__logo-side div.header__text {
-        font-family: "Lato", "Arial", sans-serif;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: 25px; }
-        @media only screen and (max-width: 767px) {
-          header div.header__inner div.header__logo-side div.header__text {
-            display: none; } }
-        header div.header__inner div.header__logo-side div.header__text p {
-          font-size: 16px;
-          color: #ACACAD;
-          text-align: left; }
-          @media only screen and (max-width: 991px) {
-            header div.header__inner div.header__logo-side div.header__text p {
-              display: none; } }
-    header div.header__inner div.header__links-side {
-      display: grid;
-      grid-template-columns: 1fr auto auto auto;
-      grid-gap: 31px;
-      justify-items: center;
-      -webkit-box-align: center;
-      -webkit-align-items: center;
-          -ms-flex-align: center;
-              align-items: center; }
-      @media only screen and (max-width: 1199px) {
-        header div.header__inner div.header__links-side {
-          grid-gap: 20px;
-          text-align: center; } }
-      @media only screen and (max-width: 767px) {
-        header div.header__inner div.header__links-side {
-          display: none; } }
-      header div.header__inner div.header__links-side a {
-        font-family: "Lato", "Arial", sans-serif;
-        font-weight: 600;
-        font-size: 15px;
-        line-height: 14px;
-        text-transform: uppercase;
-        text-decoration: none;
-        color: #18191C;
-        -webkit-transition: 0.3s;
-        -o-transition: 0.3s;
-        transition: 0.3s; }
-        @media only screen and (max-width: 1199px) {
-          header div.header__inner div.header__links-side a {
-            font-size: 14px; } }
-        header div.header__inner div.header__links-side a:hover {
-          color: #FFBE12; }
-    header div.header__inner div.header__mobile-menu__buttons {
-      height: 100%;
-      width: 30px;
-      -webkit-box-pack: center;
-      -webkit-justify-content: center;
-          -ms-flex-pack: center;
-              justify-content: center;
-      display: none; }
-      @media only screen and (max-width: 767px) {
-        header div.header__inner div.header__mobile-menu__buttons {
-          display: -webkit-box;
-          display: -webkit-flex;
-          display: -ms-flexbox;
-          display: flex; } }
-      header div.header__inner div.header__mobile-menu__buttons img {
-        cursor: pointer;
-        display: none; }
-      header div.header__inner div.header__mobile-menu__buttons img.active {
-        display: block; }
-
-nav#mobile-menu {
-  z-index: 1;
-  bottom: 0;
-  top: 0;
-  right: 0;
-  position: fixed;
-  left: 100%;
-  background-color: #ffffff;
-  padding: 70px 15px; }
-  @media only screen and (max-width: 575px) {
-    nav#mobile-menu {
-      padding: 60px 15px; } }
-  nav#mobile-menu a {
-    display: block;
-    text-transform: uppercase;
-    color: #18191C;
-    text-decoration: none;
-    padding: 15px 0;
-    font-weight: 600;
-    -webkit-transition: 0.3s;
-    -o-transition: 0.3s;
-    transition: 0.3s;
-    border-bottom: 1px solid #e0e0e0; }
-    nav#mobile-menu a:hover {
-      color: #FFBE12; }
-
-section.banner {
-  background-image: url("/img/front-page/banner/banner-bg.svg");
-  background-position: bottom;
-  background-repeat: no-repeat;
-  -webkit-background-size: cover;
-          background-size: cover;
-  padding: 77px 0 87px; }
-  @media only screen and (max-width: 767px) {
-    section.banner {
-      background-image: url("/img/front-page/banner/banner-bg-sm.svg");
-      padding: 45px 0 0; } }
-  @media only screen and (max-width: 767px) {
-    section.banner div.sm-none {
-      padding: 0; } }
-  section.banner div.banner__text-button {
-    max-width: 50%; }
-    @media only screen and (max-width: 1199px) {
-      section.banner div.banner__text-button {
-        max-width: 61%; } }
-    @media only screen and (max-width: 767px) {
-      section.banner div.banner__text-button {
-        margin-bottom: 23px;
-        max-width: 100%; } }
-    section.banner div.banner__text-button h1.banner__title {
-      font-family: "Lato", "Arial", sans-serif;
-      font-weight: 800;
-      font-size: 45px;
-      line-height: 120%;
-      letter-spacing: 0.02em;
-      color: #18191C;
-      padding-bottom: 57px; }
-      @media only screen and (max-width: 767px) {
-        section.banner div.banner__text-button h1.banner__title {
-          font-size: 38px;
-          text-align: center;
-          padding-bottom: 51%;
-          padding-left: 20px;
-          padding-right: 20px; } }
-      @media only screen and (max-width: 575px) {
-        section.banner div.banner__text-button h1.banner__title {
-          font-size: 28px; } }
-    @media only screen and (max-width: 767px) {
-      section.banner div.banner__text-button div.banner__btn_container {
-        background-color: #ffffff;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-            -ms-flex-pack: center;
-                justify-content: center;
-        padding-left: 20px;
-        padding-right: 20px; } }
-    section.banner div.banner__text-button div.banner__btn_container a.banner__btn {
-      max-width: 311px;
-      width: 100%;
-      height: 58px;
-      background: #18191C;
-      border: 1px solid #18191C;
-      display: -webkit-inline-box;
-      display: -webkit-inline-flex;
-      display: -ms-inline-flexbox;
-      display: inline-flex;
-      margin-top: 23px;
-      -webkit-box-align: center;
-      -webkit-align-items: center;
-          -ms-flex-align: center;
-              align-items: center;
-      -webkit-box-pack: center;
-      -webkit-justify-content: center;
-          -ms-flex-pack: center;
-              justify-content: center;
-      font-family: "Lato", "Arial", sans-serif;
-      font-weight: 900;
-      font-size: 16px;
-      line-height: 15px;
-      color: #ffffff;
-      text-decoration: none;
-      -webkit-transition: 0.3s;
-      -o-transition: 0.3s;
-      transition: 0.3s; }
-      @media only screen and (max-width: 767px) {
-        section.banner div.banner__text-button div.banner__btn_container a.banner__btn {
-          height: 38px;
-          font-size: 14px; } }
-      section.banner div.banner__text-button div.banner__btn_container a.banner__btn:hover {
-        background: #ffffff;
-        color: #18191C; }
-
-section.main-text {
-  max-width: 884px;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 143px 0; }
-  @media only screen and (max-width: 1199px) {
-    section.main-text {
-      padding: 143px 0; } }
-  @media only screen and (max-width: 991px) {
-    section.main-text {
-      padding: 90px 0; } }
-  @media only screen and (max-width: 767px) {
-    section.main-text {
-      padding: 34px 0 64px; } }
-
-section.inform-columns div.inform-column__inner {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 23px 30px; }
-  @media only screen and (max-width: 1199px) {
-    section.inform-columns div.inform-column__inner {
-      grid-gap: 20px; } }
-  @media only screen and (max-width: 1199px) and (max-width: 767px) {
-    section.inform-columns div.inform-column__inner {
-      grid-template-columns: 1fr; } }
-  section.inform-columns div.inform-column__inner div.inform-column__item {
-    background: #F3F4F4;
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-    grid-gap: 40px;
-    padding: 48px 54px 59px; }
-    @media only screen and (max-width: 991px) {
-      section.inform-columns div.inform-column__inner div.inform-column__item {
-        padding: 30px 25px; } }
-    @media only screen and (max-width: 767px) {
-      section.inform-columns div.inform-column__inner div.inform-column__item {
-        padding: 30px 24px 40px;
-        grid-gap: 15px;
-        grid-template-rows: auto 1fr 65px; } }
-    section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-align: center;
-      -webkit-align-items: center;
-          -ms-flex-align: center;
-              align-items: center; }
-      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__icon {
-        padding-right: 19px; }
-      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__title h3 {
-        font-family: "Lato", "Arial", sans-serif;
-        font-weight: bold;
-        font-size: 28px;
-        line-height: 150%;
-        letter-spacing: 0.02em;
-        color: #000000; }
-        @media only screen and (max-width: 767px) {
-          section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__title h3 {
-            font-size: 21px; } }
-    section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p {
-      text-align: left;
-      margin-bottom: 29px;
-      font-size: 16px; }
-      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p:last-child {
-        margin-bottom: 10px; }
-        @media only screen and (max-width: 767px) {
-          section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p:last-child {
-            margin-bottom: 0; } }
-      @media only screen and (max-width: 767px) {
-        section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p {
-          line-height: 180%;
-          font-size: 14px;
-          margin-bottom: 25px; } }
-    @media only screen and (max-width: 767px) {
-      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button {
-        -webkit-align-self: end;
-            -ms-flex-item-align: end;
-                align-self: end; } }
-    section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn {
-      max-width: 311px;
-      width: 100%;
-      height: 58px;
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-align: center;
-      -webkit-align-items: center;
-          -ms-flex-align: center;
-              align-items: center;
-      -webkit-box-pack: center;
-      -webkit-justify-content: center;
-          -ms-flex-pack: center;
-              justify-content: center;
-      background: #FFBE12;
-      border: 1px solid #FFBE12;
-      font-family: "Lato", "Arial", sans-serif;
-      font-weight: 900;
-      font-size: 16px;
-      line-height: 15px;
-      color: #18191C;
-      text-decoration: none;
-      -webkit-transition: 0.3s;
-      -o-transition: 0.3s;
-      transition: 0.3s; }
-      @media only screen and (max-width: 767px) {
-        section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn {
-          height: 38px;
-          width: 100%;
-          font-size: 14px;
-          line-height: 96%; } }
-      section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn:hover {
-        background: #ffffff; }
-
-section.bottom-text div.bottom-text__inner {
-  padding: 138px 0 182px;
-  max-width: 657px;
-  margin-left: auto;
-  margin-right: auto; }
-  @media only screen and (max-width: 1199px) {
-    section.bottom-text div.bottom-text__inner {
-      padding: 138px 250px 182px; } }
-  @media only screen and (max-width: 991px) {
-    section.bottom-text div.bottom-text__inner {
-      padding: 90px 50px 126px; } }
-  @media only screen and (max-width: 767px) {
-    section.bottom-text div.bottom-text__inner {
-      padding: 56px 50px 64px; } }
-  @media only screen and (max-width: 575px) {
-    section.bottom-text div.bottom-text__inner {
-      padding: 56px 20px 64px; } }
-  section.bottom-text div.bottom-text__inner h2.bottom-text__title {
-    text-align: center;
-    padding-bottom: 25px; }
-
-footer div.footer__inner div.footer__logo-society {
-  display: grid;
-  grid-template-columns: 60px 1fr 191px;
-  grid-gap: 25px;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center; }
-  @media only screen and (max-width: 767px) {
-    footer div.footer__inner div.footer__logo-society {
-      display: none; } }
-  footer div.footer__inner div.footer__logo-society div.footer__hr {
-    -webkit-align-self: center;
-        -ms-flex-item-align: center;
-            align-self: center; }
-    footer div.footer__inner div.footer__logo-society div.footer__hr img {
-      margin-bottom: 10px;
-      width: 100%; }
-      @media only screen and (max-width: 991px) {
-        footer div.footer__inner div.footer__logo-society div.footer__hr img {
-          border-bottom: 1px solid #E0DFDF; } }
-  footer div.footer__inner div.footer__logo-society div.footer__socials {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-pack: justify;
-    -webkit-justify-content: space-between;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-        -ms-flex-align: center;
-            align-items: center;
-    padding-left: 6px; }
-
-footer div.footer__inner div.footer__links-trustpilot {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  margin-top: 36px; }
-  @media only screen and (max-width: 767px) {
-    footer div.footer__inner div.footer__links-trustpilot {
-      display: none; } }
-  footer div.footer__inner div.footer__links-trustpilot div.footer__links {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex; }
-    @media only screen and (max-width: 991px) {
-      footer div.footer__inner div.footer__links-trustpilot div.footer__links {
-        -webkit-flex-wrap: wrap;
-            -ms-flex-wrap: wrap;
-                flex-wrap: wrap; } }
-    footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column {
-      display: grid;
-      grid-template-rows: 50px 1fr;
-      margin-right: 80px; }
-      footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:last-child {
-        margin-right: 0; }
-      @media only screen and (max-width: 1199px) {
-        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column {
-          margin-right: 32px; } }
-      @media only screen and (max-width: 991px) {
-        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column {
-          width: 50%;
-          margin: 0 0 30px;
-          grid-template-rows: 34px 1fr; } }
-      footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column h3.footer__links-title {
-        font-weight: 600;
-        font-size: 21px;
-        color: #18191C; }
-        @media only screen and (max-width: 1199px) {
-          footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column h3.footer__links-title {
-            line-height: 50px; } }
-        @media only screen and (max-width: 991px) {
-          footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column h3.footer__links-title {
-            line-height: 150%;
-            font-size: 16px;
-            margin-bottom: 0px; } }
-      footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul.footer__links-item {
-        padding-left: 0;
-        list-style: none; }
-        footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul.footer__links-item a {
-          list-style: none;
-          font-family: "Lato", "Arial", sans-serif;
-          font-weight: normal;
-          font-size: 16px;
-          line-height: 230%;
-          color: #747577;
-          text-decoration: none; }
-          @media only screen and (max-width: 991px) {
-            footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul.footer__links-item a {
-              font-size: 14px; } }
-          footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul.footer__links-item a:hover {
-            color: #FFBE12;
-            text-decoration: underline; }
-  footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot {
-    justify-self: end;
-    border-left: 1px solid #E0DFDF;
-    padding-left: 33px; }
-    @media only screen and (max-width: 1199px) {
-      footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot {
-        padding-left: 10px; } }
-    footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot div#tp-widget-wrapper {
-      margin: 0; }
-
-footer div.footer__inner div.footer__developer {
-  border-top: 1px solid #E0DFDF;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  padding: 40px 0;
-  margin-top: 37px; }
-  @media only screen and (max-width: 767px) {
-    footer div.footer__inner div.footer__developer {
-      display: none; } }
-  footer div.footer__inner div.footer__developer div.footer__hosted {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-        -ms-flex-align: center;
-            align-items: center; }
-    footer div.footer__inner div.footer__developer div.footer__hosted p {
-      font-family: "Lato", "Arial", sans-serif;
-      font-weight: normal;
-      font-size: 13px;
-      line-height: 16px;
-      color: #ACACAD;
-      padding-right: 16px; }
-      @media only screen and (max-width: 991px) {
-        footer div.footer__inner div.footer__developer div.footer__hosted p {
-          padding-right: 8px;
-          display: none; } }
-  footer div.footer__inner div.footer__developer div.footer__rights {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex; }
-    footer div.footer__inner div.footer__developer div.footer__rights p, footer div.footer__inner div.footer__developer div.footer__rights a {
-      font-family: "Lato", "Arial", sans-serif;
-      font-weight: normal;
-      font-size: 15px;
-      line-height: 150%;
-      text-decoration: none;
-      color: #ACACAD;
-      padding-right: 30px; }
-      @media only screen and (max-width: 991px) {
-        footer div.footer__inner div.footer__developer div.footer__rights p, footer div.footer__inner div.footer__developer div.footer__rights a {
-          font-size: 14px;
-          padding-right: 22px; } }
-    footer div.footer__inner div.footer__developer div.footer__rights a:hover {
-      text-decoration: underline;
-      color: #FFBE12; }
-
-footer div.footer__inner div.footer__sm {
-  display: none; }
-  @media only screen and (max-width: 767px) {
-    footer div.footer__inner div.footer__sm {
-      display: block; } }
-  footer div.footer__inner div.footer__sm div.footer__sm__contant {
-    border-top: 1px solid #ACACAD;
-    padding: 32px 0 23px; }
-    footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__logos {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-pack: justify;
-      -webkit-justify-content: space-between;
-          -ms-flex-pack: justify;
-              justify-content: space-between;
-      -webkit-box-align: center;
-      -webkit-align-items: center;
-          -ms-flex-align: center;
-              align-items: center; }
-    footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__society {
-      max-width: 200px;
-      margin: 24px auto 17px;
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-pack: justify;
-      -webkit-justify-content: space-between;
-          -ms-flex-pack: justify;
-              justify-content: space-between; }
-    footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer p, footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer a {
-      font-family: "Lato", "Arial", sans-serif;
-      font-weight: normal;
-      font-size: 13px;
-      line-height: 16px;
-      color: #747577;
-      opacity: 0.5; }
-    footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy {
-      display: -webkit-box;
-      display: -webkit-flex;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-pack: center;
-      -webkit-justify-content: center;
-          -ms-flex-pack: center;
-              justify-content: center;
-      margin-bottom: 19px; }
-      footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a {
-        text-decoration: none;
-        -webkit-transition: 0.3s;
-        -o-transition: 0.3s;
-        transition: 0.3s; }
-        footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a:hover {
-          text-decoration: underline; }
-        footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a:first-child {
-          margin-right: 20px; }