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.
|
|
@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 */
|