@ekyc_qoobiss/qbs-ect-cmp 1.2.0

package/dist/collection/components/identification-component/identification-component.css

@@ -0,0 +1,1043 @@
+/* inter-cyrillic-ext-400-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./files/inter-cyrillic-ext-400-normal.woff2') format('woff2'), url('./files/inter-all-400-normal.woff') format('woff');
+  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+/* inter-cyrillic-400-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./files/inter-cyrillic-400-normal.woff2') format('woff2'), url('./files/inter-all-400-normal.woff') format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+/* inter-greek-ext-400-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./files/inter-greek-ext-400-normal.woff2') format('woff2'), url('./files/inter-all-400-normal.woff') format('woff');
+  unicode-range: U+1F00-1FFF;
+}
+/* inter-greek-400-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./files/inter-greek-400-normal.woff2') format('woff2'), url('./files/inter-all-400-normal.woff') format('woff');
+  unicode-range: U+0370-03FF;
+}
+/* inter-vietnamese-400-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./files/inter-vietnamese-400-normal.woff2') format('woff2'), url('./files/inter-all-400-normal.woff') format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
+}
+/* inter-latin-ext-400-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./files/inter-latin-ext-400-normal.woff2') format('woff2'), url('./files/inter-all-400-normal.woff') format('woff');
+  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+/* inter-latin-400-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./files/inter-latin-400-normal.woff2') format('woff2'), url('./files/inter-all-400-normal.woff') format('woff');
+  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;
+}
+
+/* inter-cyrillic-ext-900-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  src: url('./files/inter-cyrillic-ext-900-normal.woff2') format('woff2'), url('./files/inter-all-900-normal.woff') format('woff');
+  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+/* inter-cyrillic-900-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  src: url('./files/inter-cyrillic-900-normal.woff2') format('woff2'), url('./files/inter-all-900-normal.woff') format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+/* inter-greek-ext-900-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  src: url('./files/inter-greek-ext-900-normal.woff2') format('woff2'), url('./files/inter-all-900-normal.woff') format('woff');
+  unicode-range: U+1F00-1FFF;
+}
+/* inter-greek-900-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  src: url('./files/inter-greek-900-normal.woff2') format('woff2'), url('./files/inter-all-900-normal.woff') format('woff');
+  unicode-range: U+0370-03FF;
+}
+/* inter-vietnamese-900-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  src: url('./files/inter-vietnamese-900-normal.woff2') format('woff2'), url('./files/inter-all-900-normal.woff') format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
+}
+/* inter-latin-ext-900-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  src: url('./files/inter-latin-ext-900-normal.woff2') format('woff2'), url('./files/inter-all-900-normal.woff') format('woff');
+  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+/* inter-latin-900-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  src: url('./files/inter-latin-900-normal.woff2') format('woff2'), url('./files/inter-all-900-normal.woff') format('woff');
+  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;
+}
+
+/* inter-cyrillic-ext-700-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('./files/inter-cyrillic-ext-700-normal.woff2') format('woff2'), url('./files/inter-all-700-normal.woff') format('woff');
+  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+/* inter-cyrillic-700-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('./files/inter-cyrillic-700-normal.woff2') format('woff2'), url('./files/inter-all-700-normal.woff') format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+/* inter-greek-ext-700-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('./files/inter-greek-ext-700-normal.woff2') format('woff2'), url('./files/inter-all-700-normal.woff') format('woff');
+  unicode-range: U+1F00-1FFF;
+}
+/* inter-greek-700-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('./files/inter-greek-700-normal.woff2') format('woff2'), url('./files/inter-all-700-normal.woff') format('woff');
+  unicode-range: U+0370-03FF;
+}
+/* inter-vietnamese-700-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('./files/inter-vietnamese-700-normal.woff2') format('woff2'), url('./files/inter-all-700-normal.woff') format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
+}
+/* inter-latin-ext-700-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('./files/inter-latin-ext-700-normal.woff2') format('woff2'), url('./files/inter-all-700-normal.woff') format('woff');
+  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+/* inter-latin-700-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('./files/inter-latin-700-normal.woff2') format('woff2'), url('./files/inter-all-700-normal.woff') format('woff');
+  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;
+}
+
+/* inter-cyrillic-ext-600-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('./files/inter-cyrillic-ext-600-normal.woff2') format('woff2'), url('./files/inter-all-600-normal.woff') format('woff');
+  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+/* inter-cyrillic-600-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('./files/inter-cyrillic-600-normal.woff2') format('woff2'), url('./files/inter-all-600-normal.woff') format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+/* inter-greek-ext-600-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('./files/inter-greek-ext-600-normal.woff2') format('woff2'), url('./files/inter-all-600-normal.woff') format('woff');
+  unicode-range: U+1F00-1FFF;
+}
+/* inter-greek-600-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('./files/inter-greek-600-normal.woff2') format('woff2'), url('./files/inter-all-600-normal.woff') format('woff');
+  unicode-range: U+0370-03FF;
+}
+/* inter-vietnamese-600-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('./files/inter-vietnamese-600-normal.woff2') format('woff2'), url('./files/inter-all-600-normal.woff') format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
+}
+/* inter-latin-ext-600-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('./files/inter-latin-ext-600-normal.woff2') format('woff2'), url('./files/inter-all-600-normal.woff') format('woff');
+  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+/* inter-latin-600-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('./files/inter-latin-600-normal.woff2') format('woff2'), url('./files/inter-all-600-normal.woff') format('woff');
+  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;
+}
+
+/* inter-cyrillic-ext-400-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./files/inter-cyrillic-ext-400-normal.woff2') format('woff2'), url('./files/inter-all-400-normal.woff') format('woff');
+  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+/* inter-cyrillic-400-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./files/inter-cyrillic-400-normal.woff2') format('woff2'), url('./files/inter-all-400-normal.woff') format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+/* inter-greek-ext-400-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./files/inter-greek-ext-400-normal.woff2') format('woff2'), url('./files/inter-all-400-normal.woff') format('woff');
+  unicode-range: U+1F00-1FFF;
+}
+/* inter-greek-400-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./files/inter-greek-400-normal.woff2') format('woff2'), url('./files/inter-all-400-normal.woff') format('woff');
+  unicode-range: U+0370-03FF;
+}
+/* inter-vietnamese-400-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./files/inter-vietnamese-400-normal.woff2') format('woff2'), url('./files/inter-all-400-normal.woff') format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB;
+}
+/* inter-latin-ext-400-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./files/inter-latin-ext-400-normal.woff2') format('woff2'), url('./files/inter-all-400-normal.woff') format('woff');
+  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+/* inter-latin-400-normal*/
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('./files/inter-latin-400-normal.woff2') format('woff2'), url('./files/inter-all-400-normal.woff') format('woff');
+  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-family: 'Inter', sans-serif;
+}
+h1 {
+  font-weight: 900;
+  letter-spacing: 0.01em;
+  color: #1f2024;
+  font-size: 3.2vh;
+  margin: 0;
+  line-height: 3.5vh;
+}
+.row-validare h1 {
+  font-size: 27px;
+  line-height: 29px;
+}
+body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  position: relative;
+  /*height: 100vh;*/
+  /*height: calc(var(--vh, 1vh) * 100);*/
+  /*margin: 0 auto;*/
+  /*max-width: 100%;*/
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  max-width: 991px;
+  margin: auto;
+  position: relative;
+  overflow: hidden;
+}
+.container-video {
+  height: 99vh;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+.row {
+  padding: 3.5vh 2.5vh;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  /*display: flex;*/
+  /*align-items: center;*/
+}
+.ctheight-100 {
+  height: 99vh;
+}
+.d-flex {
+  display: flex;
+}
+.space-between {
+  justify-content: space-between;
+}
+.img-info img {
+  width: 0.8vh;
+  z-index: 5;
+  position: relative;
+}
+.img-info {
+  width: 7vh;
+  height: 7vh;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: radial-gradient(100% 100% at 50% 0%, #d3b6e9 0%, #fbc2bd 100%);
+}
+.i-effect {
+  animation: 2.5s infinite transition-i;
+  position: absolute;
+  z-index: 2;
+  border-radius: 100%;
+  background: radial-gradient(100% 100% at 50% 0%, #d3b6e9 0%, #fbc2bd 100%);
+}
+.two-buttons {
+  margin-top: 3vh;
+  justify-content: center;
+}
+.align-center {
+  align-items: center;
+}
+.main-text {
+  font-weight: 400;
+  color: #71727a;
+}
+.font-size-2 {
+  font-size: 2vh;
+}
+.row-validare .font-size-2 {
+  font-size: 17px;
+  line-height: 19px;
+}
+.img-text {
+  display: flex;
+  align-items: center;
+  margin-bottom: 3vh;
+}
+.img-text .bg-img img {
+  width: 100%;
+  padding: 2vh;
+}
+.img-text h3 {
+  color: #333333;
+  font-weight: 700;
+  font-size: 2.3vh;
+  margin: 0;
+}
+.img-text .bg-img {
+  background: #e1e3e9;
+  border-radius: 30%;
+  width: 11vh;
+  height: 11vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  margin-right: 3vh;
+}
+.font-weight-bold {
+  font-weight: bold;
+}
+.font-size-18 {
+  font-size: 1.8vh;
+}
+.row-validare .font-size-18 {
+  font-size: 15px;
+  line-height: 16px;
+}
+a {
+  font-size: inherit;
+  color: inherit;
+  text-decoration: none;
+}
+.color-black {
+  color: #000;
+}
+.main-button {
+  background: #1feaa6;
+  box-shadow: 0 6px 8px rgba(71, 182, 162, 0.2);
+  border-radius: 25px;
+  text-align: center;
+  width: 100%;
+  padding: 2vh;
+  color: #fff;
+  border: 0;
+  font-size: 2vh;
+}
+.main-button:disabled {
+  color: #71727a;
+}
+.normal-button {
+  background: #1feaa6;
+  box-shadow: 0 6px 8px rgba(71, 182, 162, 0.2);
+  border-radius: 25px;
+  text-align: center;
+  padding: 2vh;
+  margin-right: 1vw;
+  margin-left: 1vw;
+  color: #fff;
+  border: 0;
+  font-size: 2vh;
+}
+.red-button {
+  background: #ff535d;
+}
+.row-validare .main-button {
+  font-size: 17px;
+}
+.text-right {
+  text-align: right;
+}
+.mb-1 {
+  margin-bottom: 1vh;
+}
+.mb-0 {
+  margin-bottom: 0;
+}
+.row-validare.row {
+  padding: 29px 21px;
+}
+.row-validare .main-button {
+  padding: 16px;
+}
+.row-validare .btn-buletin {
+  position: relative;
+  width: 100%;
+  bottom: 0;
+}
+.show-bottom {
+  bottom: -2vh;
+}
+.row-validare .main-input {
+  padding: 14px 12px;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 2px solid #464e58;
+  font-size: 19px;
+}
+.main-input {
+  width: 100%;
+  padding: 22px 26px;
+  border: 3px solid #464e58;
+  border-radius: 20px;
+  font-weight: 600;
+  font-size: 2.3vh;
+  font-family: 'Inter', sans-serif;
+}
+.second-input {
+  width: 46px;
+  height: 46px;
+  font-weight: 700;
+  font-size: 16px;
+  font-family: 'Inter', sans-serif;
+  text-align: center;
+  border: 2px solid #c5c6cc;
+  border-radius: 12px;
+  outline: none;
+  padding: 2px;
+}
+.second-input:not(:placeholder-shown) {
+  border: 2px solid #1feaa6;
+  color: #1feaa6;
+}
+.mt-9 {
+  margin-top: 9%;
+}
+.second-input::placeholder {
+  color: #fff;
+  opacity: 0;
+}
+.second-input:focus {
+  border: 2px solid #464e58;
+  color: #464e58;
+}
+.second-input.error {
+  border: 2px solid #b67171;
+}
+.second-input.error:focus {
+  border: 3px solid #b67171;
+  color: #b67171;
+  padding: 1px;
+}
+.second-input.error:not(:placeholder-shown) {
+  border: 3px solid #b67171;
+  color: #b67171;
+  padding: 2px;
+}
+.second-input-container {
+  margin-top: 30%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.input-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+.mt-15 {
+  margin-top: 15%;
+}
+.row-validare .mt-15 {
+  margin-top: 40px;
+}
+.mb-15 {
+  margin-bottom: 15%;
+}
+.row-validare .mb-15 {
+  margin-bottom: 40px;
+}
+.mb-20 {
+  margin-bottom: 20%;
+}
+.row-validare .mb-1 {
+  margin-bottom: 20px;
+}
+.row-validare .mb-20 {
+  margin-bottom: 60px;
+}
+.mt-90 {
+  margin-top: 90px;
+}
+.op-05 {
+  opacity: 0.5;
+}
+.color-red {
+  color: #b67171;
+}
+.error-text {
+  position: relative;
+  top: 50px;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.top-50 {
+  top: 50px;
+}
+.mt-25 {
+  margin-top: 25%;
+}
+.text-center {
+  text-align: center;
+}
+.scale-2 {
+  transform: scale(2);
+}
+.mt-20 {
+  margin-top: 20%;
+}
+.div-ci img {
+  max-height: 60vh;
+  max-width: 80vw;
+}
+.div-ci {
+  text-align: center;
+}
+.mt-10 {
+  margin-top: 10vh;
+}
+.pos-relative {
+  position: relative;
+}
+
+.pos-absolute {
+  position: absolute;
+}
+.btn-buletin {
+  text-align: center;
+}
+.buletin-container img {
+  width: 60%;
+}
+.buletin-container > img {
+  margin-top: 10vh;
+}
+.buletin-container {
+  text-align: center;
+}
+.bg-black {
+  background-color: #242426;
+}
+.color-white {
+  color: #fff;
+}
+.chenar-buletin {
+  margin-top: 3em;
+  text-align: center;
+}
+.chenar-buletin .ci-img {
+  width: 96%;
+}
+.chenar-buletin .face-img,
+.chenar-buletin .chenar-img {
+  left: 4%;
+  width: 92%;
+  top: -20px;
+  min-height: 55vw;
+  display: flex;
+  position: absolute;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.2);
+  justify-content: center;
+}
+.chenar-buletin img {
+  width: auto;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  border-radius: 10px;
+  z-index: 4;
+}
+.chenar-buletin .face-img {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.buletin-container .w-40 {
+  width: 40%;
+}
+.animation {
+  width: 100%;
+  height: 100%;
+  /* opacity: 60%; */
+}
+.color-black-2 {
+  color: #71727a;
+}
+.font-size-3 {
+  font-size: 3vh;
+}
+.font-weight-900 {
+  font-weight: 900;
+}
+.mt-8 {
+  margin-top: 8vh;
+}
+.mt-12 {
+  margin-top: 12vh;
+}
+.mt-30-i {
+  margin-top: 30% !important;
+}
+.chenar-buletin .face-img {
+  left: -2%;
+  width: 104%;
+  top: -40px;
+}
+.pl-2-5 {
+  padding-left: 2.5vh;
+}
+.container-coin {
+  background-color: transparent;
+  perspective: 1000px;
+  rotate: 120deg 0deg;
+}
+.dot-effect {
+  position: fixed;
+  bottom: 13vh;
+  width: calc(100% - 5vh);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.coin-flip {
+  animation: flip 0.4s ease-in;
+  animation-delay: 0.5s;
+  transform-style: preserve-3d;
+  animation-fill-mode: forwards;
+  visibility: hidden;
+}
+
+.coin-scale {
+  animation: show 0.4s ease-in;
+  animation-delay: 0.5s;
+  transform-style: preserve-3d;
+  animation-fill-mode: forwards;
+}
+
+.scroll {
+  margin: 4px, 4px;
+  padding: 4px;
+  height: 70vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.video-demo {
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+}
+
+.video-capture {
+  padding: 2.5vh 2.5vh;
+  margin-top: 3em;
+  text-align: center;
+  position: relative;
+}
+
+.capture-title {
+  z-index: 4;
+  margin-top: 3vh;
+  position: absolute;
+  bottom: 5vh;
+  padding: 2.5vh 2.5vh;
+}
+
+@keyframes transition-i {
+  from {
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  80% {
+    width: 10vh;
+    height: 10vh;
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes flip {
+  0% {
+    transform: rotateX(140deg);
+    visibility: visible;
+  }
+
+  25% {
+    transform: rotateX(120deg);
+    visibility: visible;
+  }
+
+  50% {
+    transform: rotateX(90deg);
+    visibility: visible;
+  }
+
+  75% {
+    transform: rotateX(75deg);
+    visibility: visible;
+  }
+
+  100% {
+    transform: rotateX(0deg);
+    visibility: visible;
+  }
+}
+
+@keyframes show {
+  0% {
+    transform: scale(0);
+  }
+
+  25% {
+    transform: scale(0.2);
+  }
+
+  40% {
+    transform: scale(0.4);
+  }
+
+  50% {
+    transform: scale(0.5);
+  }
+
+  60% {
+    transform: scale(0.6);
+  }
+
+  70% {
+    transform: scale(0.7);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes rise {
+  0% {
+    visibility: hidden;
+  }
+
+  50% {
+    visibility: visible;
+  }
+
+  100% {
+    visibility: visible;
+  }
+}
+.dot-shuttle {
+  position: relative;
+  left: -15px;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background-color: #1feaa6;
+  color: transparent;
+  margin: -1px 0;
+  opacity: 1;
+}
+
+.dot-shuttle::before {
+  opacity: 0.5;
+}
+.dot-shuttle::after {
+  opacity: 0.5;
+}
+.dot-shuttle::before,
+.dot-shuttle::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background-color: #1feaa6;
+  color: transparent;
+}
+
+.dot-shuttle::before {
+  left: 0;
+  animation: dotShuttle 2s infinite ease-out;
+}
+
+.dot-shuttle::after {
+  left: 0;
+  animation: dotShuttle 2s infinite ease-out;
+  animation-delay: 1s;
+}
+.buletin-container.rotate-x img {
+  animation: transform-rotate-x 2s infinite ease-in;
+}
+.rotateimg90 {
+  animation: transform-rotate-x2 2s forwards;
+  animation-delay: 1s;
+  position: absolute;
+}
+.rotateimg180 {
+  animation: transform-rotate-x3 2s forwards;
+  animation-delay: 3s;
+  position: absolute;
+  opacity: 0;
+}
+.buletin-back {
+  display: flex;
+  justify-content: center;
+}
+@keyframes transform-rotate-x3 {
+  from {
+    transform: rotateY(-90deg);
+    opacity: 1;
+  }
+  to {
+    transform: rotateY(0deg);
+    opacity: 1;
+  }
+}
+@keyframes transform-rotate-x2 {
+  to {
+    transform: rotateY(90deg);
+  }
+}
+@keyframes transform-rotate-x {
+  to {
+    transform: perspective(600px) rotateX(40deg);
+  }
+}
+@keyframes dotShuttle {
+  0%,
+  50%,
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  25% {
+    transform: translateX(-30px);
+    opacity: 0.5;
+  }
+  75% {
+    transform: translateX(30px);
+    opacity: 0.5;
+  }
+}
+@media only screen and (max-width: 350px) {
+  .second-input {
+    width: 36px;
+    height: 36px;
+  }
+}
+@media only screen and (max-width: 390px) {
+  .second-input {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+@media only screen and (min-width: 530px) and (max-width: 767px) {
+  .chenar-buletin .face-img {
+    width: 70%;
+    min-height: auto;
+    margin: auto;
+    left: 15%;
+    right: auto;
+    top: -15vh;
+  }
+}
+@media only screen and (min-width: 600px) and (max-width: 767px) {
+  .max-h img {
+    margin-left: 15%;
+    margin-right: 15%;
+  }
+  .max-h {
+    display: flex;
+    align-items: center;
+  }
+}
+@media only screen and (max-width: 991px) {
+  .buletin-container img {
+    max-width: 220px;
+  }
+}
+@media only screen and (min-width: 767px) {
+  .container {
+    max-width: 530px;
+    margin: 40px auto;
+    border-radius: 20px;
+    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
+  }
+  body {
+    height: 90vh;
+  }
+  .btn-buletin {
+    max-width: 490px;
+    bottom: 7vh;
+  }
+  .buletin-container img {
+    width: 45%;
+  }
+  .chenar-buletin .face-img,
+  .chenar-buletin .chenar-img {
+    min-height: 300px;
+  }
+  .chenar-buletin .face-img {
+    width: 80%;
+    min-height: auto;
+    margin: auto;
+    left: 10%;
+    right: auto;
+    top: -10vh;
+  }
+  .dot-effect {
+    max-width: 490px;
+  }
+}