Merge branch 'features' into 'master'

Features

See merge request !2

assets/css/main.css

 @import url('https://fonts.googleapis.com/css?family=Exo+2&display=swap');
 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
+
+@font-face {
+    font-family: "Pirulen";
+    src: url("../fonts/pirulen.ttf") format("truetype");
+    font-style: normal;
+    font-weight: normal;
+}
+
 html {
     scroll-behavior: smooth;
 }
-body, ul, li, p, span{
+
+body, ul, li, p, span {
     margin: 0;
     padding: 0;
     /*font-family: 'Exo 2', sans-serif;*/
@@ -13,13 +22,16 @@ body, ul, li, p, span{
     line-height: normal;
     letter-spacing: normal;
 }
-a{
+
+a {
     text-decoration: none;
 }
-ul{
+
+ul {
     list-style: none;
 }
-object{
+
+object {
     pointer-events: none;
 }
 
@@ -27,23 +39,26 @@ object{
 .home {
     display: none;
 }
-#main header{
+
+#main header {
     width: 100%;
     height: 110px;
     object-fit: contain;
     background-image: linear-gradient(86deg, #bf222c 1%, #e31f26);
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
     position: fixed;
     top: 0;
     z-index: 999;
 }
-#main-nav{
-    display: block;
+
+#main-nav {
+    display: flex;
+    justify-content: space-between;
     position: fixed;
     top: -100vh;
-    width: 100vw;
+    width: 100%;
     height: calc(100vh - 100px);
     background-color: rgba(0, 0, 0, .7);
     -webkit-transition-duration: 0.3s;
@@ -52,21 +67,26 @@ object{
     transition-duration: 0.3s;
     z-index: 990;
 }
-#main-nav.active{
+
+#main-nav.active {
     top: 100px;
 }
-#main-nav div{
-    padding: 10px 20px;
-}
-#main-nav div:first-child{
+
+.page-nav {
     margin-top: 50px;
 }
-#main-nav a{
+
+.page-nav div {
+    padding: 10px 20px;
+}
+
+#main-nav a {
     font-size: 24px;
     color: #fff;
     text-decoration: none;
     position: relative;
 }
+
 #main-nav a::before {
     content: '';
     bottom: -8px;
@@ -77,17 +97,54 @@ object{
     background-image: linear-gradient(86deg, #bf222c 1%, #e31f26);
     transition: 0.7s;
 }
+
 #main-nav a:hover:before {
     width: 100%;
     left: 0;
 }
-.header-hum{
-    width: 20%;
+
+.header-posts {
+    display: flex;
+    flex-direction: column;
+    margin-top: 50px;
+    padding: 10px 20px;
+}
+
+.header-posts--title {
+    max-width: max-content;
 }
-.header-logo{
-    width: 60%;
-    text-align: center;
+
+.header-posts .footer-links {
+    height: 35px;
+    margin-top: auto;
+    margin-bottom: 80px;
+}
+
+.header-posts--list {
+    padding-top: 30px;
+}
+
+.header-posts--list div {
+    display: flex;
+    align-items: center;
+    padding: 10px 20px;
+}
+
+.header-posts--list img {
+    width: 65px;
+    height: auto;
+    margin-right: 10px;
 }
+
+.header-hum {
+    width: 150px;
+    margin-right: auto;
+}
+
+.header-logo {
+    width: auto;
+}
+
 .ham {
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
@@ -97,50 +154,62 @@ object{
     -ms-user-select: none;
     user-select: none;
 }
+
 .hamRotate.active {
     transform: rotate(45deg);
 }
+
 .hamRotate180.active {
     transform: rotate(180deg);
 }
+
 .line {
-    fill:none;
+    fill: none;
     transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
-    stroke:#fff;
-    stroke-width:5.5;
-    stroke-linecap:round;
+    stroke: #fff;
+    stroke-width: 5.5;
+    stroke-linecap: round;
 }
+
 .ham1 .top {
     stroke-dasharray: 40 139;
 }
+
 .ham1 .bottom {
     stroke-dasharray: 40 180;
 }
+
 .ham1.active .top {
     stroke-dashoffset: -98px;
 }
+
 .ham1.active .bottom {
     stroke-dashoffset: -138px;
 }
-.main-lang{
-    display: flex;
-    width: 20%;
-    justify-content: flex-end;
+
+.main-lang {
+    width: 150px;
+    margin-left: auto;
 }
-.main-lang a{
+
+.main-lang a, .header-posts a {
     color: #ffffff;
     text-decoration: underline;
 }
-.main-lang a:last-child{
+
+.main-lang a:last-child {
     padding-right: 30px;
 }
-.main-lang a:nth-child(2){
+
+.main-lang a:nth-child(2) {
     padding: 0 15px;
 }
-.clearfix{
+
+.clearfix {
     width: 100%;
     clear: both;
 }
+
 .main-info {
     display: flex;
     justify-content: center;
@@ -150,9 +219,10 @@ object{
     position: relative;
     z-index: 9;
 }
-.main-info::before{
+
+.main-info::before {
     content: '';
-    background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)), url("/assets/images/FP_landing_pic.png");
+    background-image: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .3)), url("/assets/images/FP_landing_pic.png");
     background-repeat: no-repeat;
     background-color: transparent;
     background-size: cover;
@@ -161,18 +231,39 @@ object{
     position: absolute;
     top: 5px;
 }
-.main-info p{
+
+.main-info div {
     position: relative;
     width: 75%;
     height: auto;
+    margin: auto;
+}
+
+.main-info p {
     font-size: 40px;
     line-height: 54px;
     font-weight: bold;
     text-align: center;
     color: #ffffff;
-    margin: auto;
+    margin-bottom: 30px;
 }
-.main--btn{
+
+.main-info span {
+    width: 100%;
+    display: block;
+    font-size: 70px;
+    line-height: normal;
+    font-family: "Pirulen", sans-serif;
+    text-align: center;
+    color: #ffffff;
+    padding-top: 100px;
+}
+
+.main-info span b {
+    font-size: 35px;
+}
+
+.main--btn {
     width: 270px;
     height: 60px;
     object-fit: contain;
@@ -183,7 +274,7 @@ object{
     justify-content: center;
     color: #ffffff;
     background-image: linear-gradient(86deg, #bf222c 1%, #e31f26);
-    margin: 75px auto;
+    margin: 0 auto auto auto;
     background-color: #fff;
     position: relative;
     overflow: hidden;
@@ -192,10 +283,12 @@ object{
     border: none;
     outline: none;
 }
-.main--btn:hover{
-    box-shadow:0 0 10px rgba(89,3,8, .5);
+
+.main--btn:hover {
+    box-shadow: 0 0 10px rgba(89, 3, 8, .5);
 }
-.feedback-btn--custom{
+
+.feedback-btn--custom {
     width: 270px;
     height: 51px;
     object-fit: contain;
@@ -215,69 +308,75 @@ object{
     border: none;
 }
 
-.feedback-btn--custom:hover{
-    color:#ffffff;
+.feedback-btn--custom:hover {
+    color: #ffffff;
     background-color: #e31f26;
-    box-shadow: 0 0 10px #bf222c, 0 0 40px #bf222c , 0 0 80px #e31f26;
+    box-shadow: 0 0 10px #bf222c, 0 0 40px #bf222c, 0 0 80px #e31f26;
     transition-delay: .7s;
     cursor: pointer;
 }
-.feedback-btn--custom span{
+
+.feedback-btn--custom span {
     position: absolute;
     display: block;
 }
-.feedback-btn--custom span:nth-child(1){
+
+.feedback-btn--custom span:nth-child(1) {
     top: 0;
     left: -100%;
     width: 100%;
     height: 2px;
-    background:linear-gradient(86deg, #bf222c 1%, #e31f26);
+    background: linear-gradient(86deg, #bf222c 1%, #e31f26);
 }
-.feedback-btn--custom:hover span:nth-child(1){
+
+.feedback-btn--custom:hover span:nth-child(1) {
     left: 100%;
     transition: 1s;
     transition-delay: .5s;
 }
-.feedback-btn--custom span:nth-child(3){
+
+.feedback-btn--custom span:nth-child(3) {
     bottom: 0;
     right: -100%;
     width: 100%;
     height: 2px;
     background: linear-gradient(86deg, #bf222c 1%, #e31f26);
 }
-.feedback-btn--custom:hover span:nth-child(3){
+
+.feedback-btn--custom:hover span:nth-child(3) {
     right: 100%;
     transition: 1s;
     transition-delay: .5s;
 }
 
-.feedback-btn--custom span:nth-child(2){
-    top:-100%;
+.feedback-btn--custom span:nth-child(2) {
+    top: -100%;
     right: 0;
     height: 100%;
     width: 2px;
-    background:linear-gradient(86deg, #bf222c 1%, #e31f26);
+    background: linear-gradient(86deg, #bf222c 1%, #e31f26);
 }
 
-.feedback-btn--custom:hover span:nth-child(2){
+.feedback-btn--custom:hover span:nth-child(2) {
     top: 100%;
     transition: 1s;
     transition-delay: .25s;
 }
 
-.feedback-btn--custom span:nth-child(4){
+.feedback-btn--custom span:nth-child(4) {
     bottom: -100%;
-    left:0;
+    left: 0;
     height: 100%;
     width: 2px;
-    background:linear-gradient(86deg, #bf222c 1%, #e31f26);
+    background: linear-gradient(86deg, #bf222c 1%, #e31f26);
 }
 
-.feedback-btn--custom:hover span:nth-child(4){
+.feedback-btn--custom:hover span:nth-child(4) {
     bottom: 100%;
     transition: 1s;
     transition-delay: .25s;
 }
+
 /*** main styles end ***/
 
 
@@ -285,7 +384,8 @@ object{
 #preview {
     background-color: #fff;
 }
-.video-preview, .statistic-preview{
+
+.video-preview, .statistic-preview {
     height: 700px;
     display: flex;
     align-items: center;
@@ -294,7 +394,8 @@ object{
     justify-content: center;
     overflow: hidden;
 }
-.video-preview::before{
+
+.video-preview::before {
     background-image: url("data:image/svg+xml,%3Csvg width='226' height='330' viewBox='0 0 226 330' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H226V329.377L120 176L0 0Z' fill='url(%23paint0_linear)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x1='138' y1='8.13018e-07' x2='202' y2='296' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%239B4F55'/%3E%3Cstop offset='1' stop-color='%23C4C4C4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position-x: right;
@@ -306,7 +407,8 @@ object{
     top: 0;
     right: 0;
 }
-.video-preview::after{
+
+.video-preview::after {
     background-image: url("data:image/svg+xml,%3Csvg width='633' height='656' viewBox='0 0 633 656' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H410L634 336V656H410L0 0Z' fill='url(%23paint0_linear)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x1='465' y1='60' x2='273' y2='308' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23C4C4C4'/%3E%3Cstop offset='1' stop-color='%23C4C4C4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position-x: right;
@@ -317,7 +419,8 @@ object{
     z-index: 0;
     right: 0;
 }
-.video-preview span{
+
+.video-preview span {
     background-image: url("data:image/svg+xml,%3Csvg width='635' height='656' viewBox='0 0 635 656' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M634.271 656H224.271L0.27124 320V0H224.271L634.271 656Z' fill='url(%23paint0_linear)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x1='183' y1='656' x2='439' y2='408' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D0CFCF'/%3E%3Cstop offset='1' stop-color='%23C4C4C4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position-x: left;
@@ -329,7 +432,8 @@ object{
     left: 0;
     bottom: 0;
 }
-.video-preview span::before{
+
+.video-preview span::before {
     content: '';
     background-image: url("data:image/svg+xml,%3Csvg width='226' height='330' viewBox='0 0 226 330' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M226 330H0V0.622864L106 154L226 330Z' fill='url(%23paint0_linear)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x1='20' y1='330' x2='88' y2='138' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23747475'/%3E%3Cstop offset='1' stop-color='%23C4C4C4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
     background-repeat: no-repeat;
@@ -342,7 +446,8 @@ object{
     left: 0;
     bottom: 0;
 }
-.video-preview iframe{
+
+.video-preview iframe {
     height: calc(100% - 240px);
     margin: auto;
     position: absolute;
@@ -351,13 +456,14 @@ object{
     border: 4px solid #DE232E;
     z-index: 1;
 }
-.statistic-preview{
+
+.statistic-preview {
     flex-direction: column;
     object-fit: contain;
     position: relative;
 }
 
-.statistic-preview::before{
+.statistic-preview::before {
     content: '';
     background-image: url("/assets/images/static-bg.jpg");
     background-repeat: no-repeat;
@@ -367,14 +473,16 @@ object{
     height: 100%;
     z-index: 0;
 }
-.statistic-block{
+
+.statistic-block {
     display: flex;
     justify-content: space-evenly;
     text-align: center;
     z-index: 1;
     width: 100%;
 }
-.statistic-preview span{
+
+.statistic-preview span {
     font-size: 96px;
     font-weight: bold;
     line-height: 1.31;
@@ -382,7 +490,8 @@ object{
     color: #ffffff;
     position: relative;
 }
-.statistic-preview--title{
+
+.statistic-preview--title {
     font-weight: bold;
     font-size: 40px;
     line-height: 54px;
@@ -391,31 +500,35 @@ object{
     color: #ffffff;
     padding-bottom: 145px;
 }
-.statistic-preview div p{
+
+.statistic-preview div p {
     font-size: 24px;
     line-height: 1.25;
     letter-spacing: normal;
     text-align: center;
     color: #c4c4c4;
 }
+
 /*** preview styles end ***/
 
 
 /*** know more styles start ***/
-#know-more{
+#know-more {
     object-fit: contain;
     background-color: #f1f1f1;
     z-index: 0;
     position: relative;
 }
-#know-more img{
+
+#know-more img {
     position: absolute;
     width: 100%;
     height: 475px;
     mix-blend-mode: multiply;
     z-index: 0;
 }
-#know-more span{
+
+#know-more span {
     background-image: url("data:image/svg+xml,%3Csvg width='138' height='525' viewBox='0 0 138 525' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M138 0.0974121H-0.72876V524.097L138 0.0974121Z' fill='url(%23paint0_linear)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x1='58' y1='0.0974121' x2='141.196' y2='378.823' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23DB0F18'/%3E%3Cstop offset='1' stop-color='%23C4C4C4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
     background-repeat: no-repeat;
     content: '';
@@ -426,25 +539,29 @@ object{
     left: 0;
     top: 0;
 }
+
 .know-more--title {
     position: relative;
     padding-top: 105px;
     padding-bottom: 85px;
     z-index: 1;
 }
-.know-more--title p{
+
+.know-more--title p {
     font-size: 56px;
     font-weight: 300;
     text-align: center;
     color: #4a4a4a;
     margin: auto;
 }
+
 .know-more--cards {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-evenly;
 }
-.know-more--card{
+
+.know-more--card {
     display: flex;
     align-items: center;
     width: 575px;
@@ -453,20 +570,23 @@ object{
     position: relative;
     margin-bottom: 65px;
 }
-.know-more--card p{
+
+.know-more--card p {
     font-size: 16px;
     color: #404041;
     padding-right: 35px;
     text-align: justify;
 }
-.know-more--btn{
+
+.know-more--btn {
     width: 100%;
     display: flex;
     justify-content: center;
     padding-top: 25px;
     padding-bottom: 100px;
 }
-#know-more a{
+
+#know-more a {
     width: 350px;
     height: 60px;
     font-size: 20px;
@@ -479,39 +599,46 @@ object{
     align-items: center;
     background-image: linear-gradient(86deg, #bf222c 1%, #e31f26);
 }
-#know-more a:hover{
-    box-shadow:0 0 10px rgba(89,3,8, .5);
+
+#know-more a:hover {
+    box-shadow: 0 0 10px rgba(89, 3, 8, .5);
 }
+
 /*** know more styles end ***/
 
 
 /*** decision more styles start ***/
-#decision{
+#decision {
     background-image: url("/assets/images/decision-bg.svg");
     background-repeat: no-repeat;
     background-color: transparent;
     background-size: cover;
 }
-.decision-title{
+
+.decision-title {
     padding-top: 80px;
     padding-bottom: 65px;
 }
-.decision-title p{
+
+.decision-title p {
     font-size: 56px;
     font-weight: 300;
     text-align: center;
     color: #ffffff;