Licitator 1.0
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

316 lines
6.1 KiB

5 years ago
  1. @font-face {
  2. font-family: "Poppins-Regular";
  3. src: url("../fonts/poppins/Poppins-Regular.ttf"); }
  4. * {
  5. -webkit-box-sizing: border-box;
  6. -moz-box-sizing: border-box;
  7. box-sizing: border-box; }
  8. body {
  9. font-family: "Poppins-Regular";
  10. font-size: 13px;
  11. margin: 0;
  12. /*background: url("../images/form-wizard-bg.jpg") center bottom;*/
  13. /*background-size: cover; */
  14. }
  15. :focus {
  16. outline: none; }
  17. textarea {
  18. resize: none; }
  19. input, textarea, select, button {
  20. font-family: "Poppins-Regular";
  21. font-size: 13px;
  22. color: #333; }
  23. select {
  24. -moz-appearance: none;
  25. -webkit-appearance: none;
  26. cursor: pointer; }
  27. select option[value=""][disabled] {
  28. display: none; }
  29. p, h1, h2, h3, h4, h5, h6, ul {
  30. margin: 0; }
  31. ul {
  32. padding: 0;
  33. margin: 0;
  34. list-style: none; }
  35. a {
  36. text-decoration: none; }
  37. textarea {
  38. resize: none; }
  39. img {
  40. max-width: 100%;
  41. vertical-align: middle; }
  42. .wrapper {
  43. max-width: 1400px;
  44. display: flex;
  45. height: 100vh;
  46. margin: auto auto 200px auto;
  47. align-items: center; }
  48. .wizard {
  49. width: 100%;
  50. position: relative;
  51. height: 656px; }
  52. .steps .current-info, .steps .number {
  53. display: none; }
  54. .avartar {
  55. display: block;
  56. text-align: center;
  57. margin-bottom: 29px; }
  58. .steps {
  59. height: 2px;
  60. position: absolute;
  61. width: 39.91%;
  62. background: #b7b2ab;
  63. bottom: -52px;
  64. left: 50%;
  65. transform: translateX(-50%); }
  66. .steps ul {
  67. height: 2px;
  68. position: absolute;
  69. background: #333;
  70. width: 33.33%;
  71. bottom: 0;
  72. left: 0;
  73. transition: all 0.3s ease; }
  74. .steps:before {
  75. content: "1";
  76. color: #333;
  77. position: absolute;
  78. left: 0;
  79. bottom: 3px;
  80. font-size: 13px;
  81. font-family: "Poppins-Regular";
  82. transition: all 0.3s ease; }
  83. .steps:after {
  84. content: "3";
  85. color: #333;
  86. position: absolute;
  87. right: 0;
  88. bottom: 3px;
  89. font-size: 13px;
  90. font-family: "Poppins-Regular"; }
  91. .steps.step-2 ul {
  92. width: 66.67%;
  93. transition: all 0.3s ease; }
  94. .steps.step-2:before {
  95. content: '2';
  96. left: 63.67%;
  97. transition: all 0.3s ease; }
  98. .steps.step-3 ul {
  99. width: 100%;
  100. transition: all 0.3s ease; }
  101. .steps.step-3:before {
  102. content: '';
  103. left: 100%;
  104. transition: all 0.1s ease; }
  105. .inner {
  106. padding: 50px 58px;
  107. background: #fff;
  108. height: 100%;
  109. padding-bottom: 31%; }
  110. .form-row {
  111. margin-bottom: 26px; }
  112. .form-row.form-group {
  113. display: flex; }
  114. .form-row.form-group .form-holder {
  115. width: 50%;
  116. margin-right: 25px; }
  117. .form-row.form-group .form-holder:last-child {
  118. margin-right: 0; }
  119. .form-holder {
  120. position: relative; }
  121. .form-holder i {
  122. position: absolute;
  123. top: 5px;
  124. right: 0;
  125. font-size: 17px;
  126. color: #333; }
  127. .form-holder i.small {
  128. font-size: 13px;
  129. top: 50%;
  130. transform: translateY(-50%); }
  131. .form-control {
  132. height: 30px;
  133. border: none;
  134. border-bottom: 1px solid #333;
  135. width: 100%;
  136. background: none;
  137. font-weight: 600; }
  138. .form-control::-webkit-input-placeholder {
  139. color: #333; }
  140. .form-control::-moz-placeholder {
  141. color: #333; }
  142. .form-control:-ms-input-placeholder {
  143. color: #333; }
  144. .form-control:-moz-placeholder {
  145. color: #333; }
  146. .select {
  147. position: relative; }
  148. .select .select-control {
  149. height: 30px;
  150. border: none;
  151. border-bottom: 1px solid #333;
  152. width: 100%;
  153. font-weight: 600;
  154. cursor: pointer;
  155. display: flex;
  156. align-items: center; }
  157. .select .dropdown {
  158. display: none;
  159. position: absolute;
  160. top: 100%;
  161. width: 100%;
  162. background: #fff;
  163. z-index: 9;
  164. border: 1px solid #4192cb; }
  165. .select .dropdown li {
  166. padding: 5px 10px; }
  167. .select .dropdown li:hover {
  168. background: #81acee;
  169. color: #fff; }
  170. .select .dropdown.active {
  171. display: block; }
  172. .section-3 h6 {
  173. font-size: 13px;
  174. color: #333;
  175. padding-top: 5px;
  176. margin-bottom: 14px; }
  177. .payment-block {
  178. display: flex;
  179. flex-wrap: wrap;
  180. justify-content: space-between; }
  181. .payment-block .payment-item {
  182. width: 47.76%; }
  183. .payment-item {
  184. border: 1px solid #e5e5e5;
  185. height: 53px;
  186. display: flex;
  187. align-items: center;
  188. padding-left: 8px;
  189. padding-right: 11px;
  190. margin-bottom: 15px;
  191. cursor: pointer; }
  192. .payment-item .payment-logo {
  193. width: 34.53%; }
  194. .payment-item .payment-content {
  195. width: 65.47%; }
  196. .payment-item.active {
  197. border: 1px solid #333; }
  198. .actions ul {
  199. display: flex;
  200. justify-content: space-between;
  201. position: fixed;
  202. bottom: 185px;
  203. right: 58px;
  204. left: 58px; }
  205. .actions li a {
  206. border: none;
  207. display: inline-flex;
  208. height: 51px;
  209. width: 118px;
  210. align-items: center;
  211. color: #fff;
  212. cursor: pointer;
  213. padding-left: 33px;
  214. font-size: 15px;
  215. position: relative;
  216. background: #333; }
  217. .actions li a:before {
  218. content: "\f2ee";
  219. font-family: Material-Design-Iconic-Font;
  220. position: absolute;
  221. top: 50%;
  222. transform: translateY(-50%);
  223. right: 32px; }
  224. .actions li a:hover {
  225. background: #4d4d4d; }
  226. .actions li:first-child a {
  227. background: none;
  228. border: 1px solid #333;
  229. padding-left: 50px;
  230. color: #333; }
  231. .actions li:first-child a:before {
  232. content: "\f2ea";
  233. right: 77px; }
  234. .actions li:first-child a:hover {
  235. background: #4d4d4d;
  236. border-color: transparent;
  237. color: #fff; }
  238. .actions li:last-child a {
  239. padding-left: 28px; }
  240. .actions li:last-child a:before {
  241. right: 27px; }
  242. .actions li[aria-disabled="true"] a {
  243. opacity: 0;
  244. transition: all 1s; }
  245. @media (max-width: 1500px) {
  246. .steps {
  247. bottom: -40px; }
  248. .wizard {
  249. margin-bottom: 25px; } }
  250. @media (max-width: 1199px) {
  251. .steps {
  252. bottom: -52px; }
  253. .wizard {
  254. margin-bottom: 0; } }
  255. @media (max-width: 767px) {
  256. body {
  257. background: none; }
  258. .wrapper {
  259. height: auto;
  260. display: block; }
  261. .wizard {
  262. width: auto;
  263. height: auto;
  264. margin-left: 0;
  265. margin-bottom: 100px; }
  266. .inner {
  267. padding: 30px 20px;
  268. height: auto; }
  269. .actions ul {
  270. position: static;
  271. margin: 0 20px; }
  272. .payment-block {
  273. display: block; }
  274. .payment-block .payment-item {
  275. width: 100%; }
  276. .steps {
  277. bottom: -60px;
  278. left: 20px;
  279. right: 20px;
  280. width: auto;
  281. transform: translateX(0); } }
  282. /*# sourceMappingURL=style.css.map */