@charset "utf-8";
 ::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
background: rgba(1, 1, 1, 0.5);
}
::-webkit-scrollbar-thumb {
background: #f8dc3e;
border-radius: 4px;
}
*,
::after,
::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
body,
html {
width: 100%;
height: 100%;
}
body {
color: #fff;
margin: 0;
min-width: 300px;
line-height: 1;
font-family: Rubik, sans-serif;
font-size: .875rem;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #010101;
}
a {
color: inherit;
text-decoration: none;
}
a,
a::after,
a::before,
a *,
svg,
.ani,
.ani::after,
.ani::before,
button {
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
button,
input,
textarea {
font: inherit;
}
.container {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: flex-start;
align-items: flex-start;
width: 100%;
min-height: 1px;
margin-right: auto;
margin-left: auto;
}
.row {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: flex-start;
align-items: flex-start;
width: 100%;
min-height: 1px;
margin-right: auto;
margin-left: auto;
}
main {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
overflow: hidden;
}
main > section {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
.button {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: fit-content;
padding: 1.0625rem 2.1875rem;
border-radius: 6.25rem;
background-color: #F8DC3E;
color: #010101;
font-size: .9375rem;
font-weight: 500;
line-height: 1.0666666667;
white-space: nowrap;
gap: .625rem;
border: none;
cursor: pointer;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.button:hover {
background-color: #fff;
}
.button__third {
background-color: #0D384B;
color: #fff;
}
.button__third:hover {
color: #010101;
}
._icon::before,
._icon::after {
font-family: icons;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.workWith__block {
padding-bottom: 7.1875rem;
position: relative;
}
.workWith__block::before {
content: '';
width: 54.5625rem;
height: 83.5625rem;
position: absolute;
top: -70%;
right: 0;
z-index: -1;
background-image: url(https://biometric.vision/wp-content/themes/biometric/static/img/accent-dec.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.workWith {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
text-align: center;
color: #010101;
padding-left: 2.5rem;
padding-top: 4.375rem;
padding-right: 2.5rem;
padding-bottom: 4.375rem;
background: linear-gradient(99deg, #ffdc00 0, #ffe438 46%, #efd858 96.97%);
border-radius: 1.875rem;
-webkit-border-radius: 1.875rem;
-moz-border-radius: 1.875rem;
-ms-border-radius: 1.875rem;
-o-border-radius: 1.875rem;
}
.workWith > h2 {
font-size: 3.75rem;
line-height: 117%;
letter-spacing: -2px;
text-transform: uppercase;
font-weight: 800;
margin-top: 0;
margin-bottom: 1.25rem;
}
.workWith > p {
font-size: 1.375rem;
line-height: 150%;
max-width: 56.25rem;
margin: 0 auto;
}
.workWith > a {
width: fit-content;
background-color: #010101;
color: #fff;
margin-left: auto;
margin-right: auto;
margin-top: 2.5rem;
}
.workWith > a:hover {
color: #010101;
}
.workWith > a::before {
content: "\e904";
font-size: .75rem;
} .gsm {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background-color: rgba(10, 19, 26, .9);
visibility: hidden;
opacity: 0;
}
body.gsm__open > .gsm {
visibility: visible;
opacity: 1;
}
.gsm__modal {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
max-width: 560px;
background-color: #F8DC3E;
position: relative;
padding-left: 30px;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
border-radius: 2rem;
-webkit-border-radius: 2rem;
-moz-border-radius: 2rem;
-ms-border-radius: 2rem;
-o-border-radius: 2rem;
}
.gsm__close {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
padding: 0;
border: none;
background-color: transparent;
cursor: pointer;
position: absolute;
top: 20px;
right: 20px;
}
.gsm__close svg {
stroke: #232323;
}
.gsm__close:hover svg {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.gsm__modal > h2 {
font-weight: 800;
font-size: 24px;
line-height: 1.5;
color: #010101;
text-align: center;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 30px;
}
.gsm__form {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
gap: 25px;
}
.gsm__form > label {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
width: 100%;
} .gsm__form > label > input {
width: 100%;
height: 54px;
padding: .9375rem;
border: none;
border-radius: .3125rem;
-webkit-border-radius: .3125rem;
-moz-border-radius: .3125rem;
-ms-border-radius: .3125rem;
-o-border-radius: .3125rem;
}
.gsm__form > button.button {
width: 100%;
background-color: #010101;
color: #fff;
}
.gsm__form > button.button:hover {
background-color: #fff;
color: #010101;
}
.gsm__form > button.button::before {
content: "\e904";
font-size: .75rem;
}
.gsm__form-success,
.gsm__form-error,
.gsm__form-sending {
display: none;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #F8DC3E;
color: #010101;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 4;
padding-left: 30px;
padding-right: 30px;
}
.gsm__modal.error > .gsm__form-error,
.gsm__modal.success > .gsm__form-success,
.gsm__modal.sending > .gsm__form-sending {
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
.gsm__form-error > h5,
.gsm__form-success > h5 {
font-size: 42px;
line-height: 1;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
text-align: center;
margin-top: 0;
margin-bottom: 30px;
}
.gsm__form-error > p,
.gsm__form-success > p {
font-size: 24px;
line-height: 1;
font-weight: 700;
letter-spacing: 1.6px;
text-align: center;
margin-top: 0;
margin-bottom: 0;
}
.gsm__form-loader {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.gsm__form-loader div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid #fff;
border-radius: 50%;
animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.gsm__form-loader div:nth-child(1) {
animation-delay: -0.45s;
}
.gsm__form-loader div:nth-child(2) {
animation-delay: -0.3s;
}
.gsm__form-loader div:nth-child(3) {
animation-delay: -0.15s;
} @keyframes stick-1-open {
0% {
width: 29px
}
30% {
width: 3px;
transform: translate(14px, 0px)
}
65% {
width: 3px;
transform: translate(14px, -29px);
animation-timing-function: cubic-bezier(0, 1, 1, 1)
}
100% {
width: 2px;
transform: translate(9px, 17px)
}
}
@-webkit-keyframes stick-2-open {
65% {
width: 29px;
transform: translate(0px, 0px) rotate(0deg)
}
100% {
width: 29px;
transform: translate(0px, 0px) rotate(45deg)
}
}
@keyframes stick-2-open {
65% {
width: 29px;
transform: translate(0px, 0px) rotate(0deg)
}
100% {
width: 29px;
transform: translate(0px, 0px) rotate(45deg)
}
}
@-webkit-keyframes stick-3-open {
65% {
transform: translate(0px, 0px) rotate(0deg)
}
100% {
transform: translate(0px, -8px) rotate(-45deg)
}
}
@keyframes stick-3-open {
65% {
transform: translate(0px, 0px) rotate(0deg)
}
100% {
transform: translate(0px, -8px) rotate(-45deg)
}
}
@-webkit-keyframes stick-1-close {
0%,
70% {
width: 0;
transform: translate(0, 0)
}
100% {
width: 29px;
transform: translate(0, 0)
}
}
@keyframes stick-1-close {
0%,
70% {
width: 0;
transform: translate(0, 0)
}
100% {
width: 29px;
transform: translate(0, 0)
}
}
@-webkit-keyframes stick-2-close {
0% {
width: 29px;
transform: translate(0px, 0px) rotate(45deg)
}
20% {
width: 3px;
transform: translate(0, 0px) rotate(45deg)
}
40% {
width: 0
}
65% {
transform: translate(0, -26px);
animation-timing-function: cubic-bezier(0, 1, 1, 1)
}
80% {
width: 0
}
100% {
width: 29px;
transform: translate(0, 0px)
}
}
@keyframes stick-2-close {
0% {
width: 29px;
transform: translate(0px, 0px) rotate(45deg)
}
20% {
width: 3px;
transform: translate(0, 0px) rotate(45deg)
}
40% {
width: 0
}
65% {
transform: translate(0, -26px);
animation-timing-function: cubic-bezier(0, 1, 1, 1)
}
80% {
width: 0
}
100% {
width: 29px;
transform: translate(0, 0px)
}
}
@-webkit-keyframes stick-3-close {
0% {
width: 29px;
transform: translate(0px, -8px) rotate(-45deg)
}
20% {
width: 3px;
transform: translate(0, -8px) rotate(-45deg)
}
40% {}
65% {
transform: translate(0, -35px);
animation-timing-function: cubic-bezier(0, 1, 1, 1)
}
90% {
width: 3px
}
100% {
width: 29px;
transform: translate(0, 0px)
}
}
@keyframes stick-3-close {
0% {
width: 29px;
transform: translate(0px, -8px) rotate(-45deg)
}
20% {
width: 3px;
transform: translate(0, -8px) rotate(-45deg)
}
40% {}
65% {
transform: translate(0, -35px);
animation-timing-function: cubic-bezier(0, 1, 1, 1)
}
90% {
width: 3px
}
100% {
width: 29px;
transform: translate(0, 0px)
}
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}