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
316 lines
6.1 KiB
@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 */
|