@font-face { font-family: "Poppins-Regular"; src: url("../fonts/poppins/Poppins-Regular.ttf"); } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family: "Poppins-Regular"; font-size: 13px; margin: 0; /*background: url("../images/form-wizard-bg.jpg") center bottom;*/ /*background-size: cover; */ } :focus { outline: none; } textarea { resize: none; } input, textarea, select, button { font-family: "Poppins-Regular"; font-size: 13px; color: #333; } select { -moz-appearance: none; -webkit-appearance: none; cursor: pointer; } select option[value=""][disabled] { display: none; } p, h1, h2, h3, h4, h5, h6, ul { margin: 0; } ul { padding: 0; margin: 0; list-style: none; } a { text-decoration: none; } textarea { resize: none; } img { max-width: 100%; vertical-align: middle; } .wrapper { max-width: 1400px; display: flex; height: 100vh; margin: auto auto 200px auto; align-items: center; } .wizard { width: 100%; position: relative; height: 656px; } .steps .current-info, .steps .number { display: none; } .avartar { display: block; text-align: center; margin-bottom: 29px; } .steps { height: 2px; position: absolute; width: 39.91%; background: #b7b2ab; bottom: -52px; left: 50%; transform: translateX(-50%); } .steps ul { height: 2px; position: absolute; background: #333; width: 33.33%; bottom: 0; left: 0; transition: all 0.3s ease; } .steps:before { content: "1"; color: #333; position: absolute; left: 0; bottom: 3px; font-size: 13px; font-family: "Poppins-Regular"; transition: all 0.3s ease; } .steps:after { content: "3"; color: #333; position: absolute; right: 0; bottom: 3px; font-size: 13px; font-family: "Poppins-Regular"; } .steps.step-2 ul { width: 66.67%; transition: all 0.3s ease; } .steps.step-2:before { content: '2'; left: 63.67%; transition: all 0.3s ease; } .steps.step-3 ul { width: 100%; transition: all 0.3s ease; } .steps.step-3:before { content: ''; left: 100%; transition: all 0.1s ease; } .inner { padding: 50px 58px; background: #fff; height: 100%; padding-bottom: 31%; } .form-row { margin-bottom: 26px; } .form-row.form-group { display: flex; } .form-row.form-group .form-holder { width: 50%; margin-right: 25px; } .form-row.form-group .form-holder:last-child { margin-right: 0; } .form-holder { position: relative; } .form-holder i { position: absolute; top: 5px; right: 0; font-size: 17px; color: #333; } .form-holder i.small { font-size: 13px; top: 50%; transform: translateY(-50%); } .form-control { height: 30px; border: none; border-bottom: 1px solid #333; width: 100%; background: none; font-weight: 600; } .form-control::-webkit-input-placeholder { color: #333; } .form-control::-moz-placeholder { color: #333; } .form-control:-ms-input-placeholder { color: #333; } .form-control:-moz-placeholder { color: #333; } .select { position: relative; } .select .select-control { height: 30px; border: none; border-bottom: 1px solid #333; width: 100%; font-weight: 600; cursor: pointer; display: flex; align-items: center; } .select .dropdown { display: none; position: absolute; top: 100%; width: 100%; background: #fff; z-index: 9; border: 1px solid #4192cb; } .select .dropdown li { padding: 5px 10px; } .select .dropdown li:hover { background: #81acee; color: #fff; } .select .dropdown.active { display: block; } .section-3 h6 { font-size: 13px; color: #333; padding-top: 5px; margin-bottom: 14px; } .payment-block { display: flex; flex-wrap: wrap; justify-content: space-between; } .payment-block .payment-item { width: 47.76%; } .payment-item { border: 1px solid #e5e5e5; height: 53px; display: flex; align-items: center; padding-left: 8px; padding-right: 11px; margin-bottom: 15px; cursor: pointer; } .payment-item .payment-logo { width: 34.53%; } .payment-item .payment-content { width: 65.47%; } .payment-item.active { border: 1px solid #333; } .actions ul { display: flex; justify-content: space-between; position: fixed; bottom: 185px; right: 58px; left: 58px; } .actions li a { border: none; display: inline-flex; height: 51px; width: 118px; align-items: center; color: #fff; cursor: pointer; padding-left: 33px; font-size: 15px; position: relative; background: #333; } .actions li a:before { content: "\f2ee"; font-family: Material-Design-Iconic-Font; position: absolute; top: 50%; transform: translateY(-50%); right: 32px; } .actions li a:hover { background: #4d4d4d; } .actions li:first-child a { background: none; border: 1px solid #333; padding-left: 50px; color: #333; } .actions li:first-child a:before { content: "\f2ea"; right: 77px; } .actions li:first-child a:hover { background: #4d4d4d; border-color: transparent; color: #fff; } .actions li:last-child a { padding-left: 28px; } .actions li:last-child a:before { right: 27px; } .actions li[aria-disabled="true"] a { opacity: 0; transition: all 1s; } @media (max-width: 1500px) { .steps { bottom: -40px; } .wizard { margin-bottom: 25px; } } @media (max-width: 1199px) { .steps { bottom: -52px; } .wizard { margin-bottom: 0; } } @media (max-width: 767px) { body { background: none; } .wrapper { height: auto; display: block; } .wizard { width: auto; height: auto; margin-left: 0; margin-bottom: 100px; } .inner { padding: 30px 20px; height: auto; } .actions ul { position: static; margin: 0 20px; } .payment-block { display: block; } .payment-block .payment-item { width: 100%; } .steps { bottom: -60px; left: 20px; right: 20px; width: auto; transform: translateX(0); } } /*# sourceMappingURL=style.css.map */