@font-face {
  font-family: "e-ukraine-bold";
  src: url("./e-ukraine/e-Ukraine-Bold.woff"); }
@font-face {
  font-family: "e-ukraine-medium";
  src: url("./e-ukraine/e-Ukraine-Medium.woff"); }
@font-face {
  font-family: "e-ukraine-regular";
  src: url("./e-ukraine/e-Ukraine-Regular.woff"); }  
@-webkit-keyframes granimate {
    0%,100% {
        background-position: 0 0%
    }

    25%,75% {
        background-position: 20% 20%
    }

    50% {
        background-position: 50% 50%
    }
}

@keyframes granimate {
    0%,100% {
        background-position: 0% 0%
    }

    25%,75% {
        background-position: 20% 20%
    }

    50% {
        background-position: 50% 50%
    }
} 
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  font-family: "e-ukraine-regular" !important;
  font-size: 15px !important;
  color: #000 !important;
  margin: 0; 
  content: "";
  animation: 15s infinite granimate;
  display: block;
  z-index: -1;
  background-image: linear-gradient(217deg, rgba(255,0,0,0.8), rgba(255,0,0,0) 50.71%),linear-gradient(127deg, rgba(29, 179, 123, 0.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,0.8), rgba(0,0,255,0) 70.71%);
  background-size: 150vw 180vmax;
  background-size: 150vw calc(var(--vh, 1vmax) * 180);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-animation: 15s infinite granimate;
  animation: 15s infinite granimate;
}
body::after{
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
:focus {
  outline: none; }

textarea {
  resize: none; }

input, textarea, select, button {
  font-family: "e-ukraine-regular" !important;
  font-size: 15px !important;
  color: #000 !important; }

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; }

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: none; }
  select option[value=""][disabled] {
    display: none; }

img {
  max-width: 100%;
  vertical-align: middle; }

.form-header > .fb-logo{
  background: #000;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
}
.form-header > .fb-logo:hover {
  border: 3px solid #3b5998;
  box-shadow: 0 0 15px #3b5998;
  transition: all 0.5s ease;
}
.form-header > .fb-logo > .fa{
  color: #fff;
  transition: all 0.5s ease;
}
.form-header > .fb-logo > .fa:hover{
  color: #3b5998;
  text-shadow: 0 0 15px #3b5998;
  transition: all 0.5s ease;
}
.form-header > .insta-logo{
  background: #000;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
}
.form-header > .insta-logo:hover {
  border: 3px solid #bc2a8d;
  box-shadow: 0 0 15px #bc2a8d;
  transition: all 0.5s ease;
}
.form-header > .insta-logo > .fa{
  color: #fff;
  transition: all 0.5s ease;
}
.form-header > .insta-logo > .fa:hover{
  color: #bc2a8d;
  text-shadow: 0 0 15px #bc2a8d;
  transition: all 0.5s ease;
}

.wrapper {
  width: 1400px;
  margin: auto;
  margin-top: 10px;
  display: block; }

.wizard > .steps .current-info, .wizard > .steps .number {
  display: none; }

.image-holder {
  width: 41.07%;
  align-self: flex-end; }

/* Select picker overrides*/
.caret {
  display: none !important;
}
.bootstrap-select .dropdown-menu {
	width: 100%;
}

.bootstrap-select .dropdown-menu li a {
  white-space: normal;
  border-bottom: 1px dotted #000;
  min-height: 40px;
}


button[data-id="make"], button[data-id="install"], button[data-id="tags"], button[data-id="maintenance"], button[data-id="locations"]{
  border: 1px solid #000 !important;
  background: none !important;
  border-radius: 5px !important;
  width: 100% !important;
  height: 41px;
}

form {
  width: 58.93%;
  padding-left: 100px;
  padding-right: 100px;
  align-self: center; }

.form-header {
  text-align: center; }
  .form-header a {
    font-family: "e-ukraine-regular" !important;
    color: #fff;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    background: #000; }

h3 {
  font-family: "e-ukraine-medium" !important;
  font-size: 22px;
  text-transform: uppercase;
  margin-bottom: 46px;
  letter-spacing: 3px;
  margin-top: 19px; }

#wizard {
  border: 1px solid #000;
  border-radius: 10px;
  padding: 47px 57px 50px 50px;
  position: relative;
  background: rgba(255, 255, 255, 0.1); }

.wizard > .steps ul {
  content: "";
  width: 75%;
  height: 12px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  position: absolute;
  left: 50%;
  bottom: -69px;
  transform: translateX(-50%); }
  .wizard > .steps ul:before {
    content: '\f26b';
    position: absolute;
    font-size: 20px;
    font-family: Material-Design-Iconic-Font;
    bottom: 20px;
    left: 0%;
    transition: all 0.5s ease; }
  .wizard > .steps ul:after {
    content: "";
    width: 3%;
    height: 12px;
    background: #000;
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s ease; }
  .wizard > .steps ul.step-2:before {
    left: 15%;
    transition: all 0.5s ease; }
  .wizard > .steps ul.step-2:after {
    width: 20%;
    transition: all 0.5s ease; }
  .wizard > .steps ul.step-3:before {
    left: 35%;
    transition: all 0.5s ease; }
  .wizard > .steps ul.step-3:after {
    width: 40%;
    transition: all 0.5s ease; }
  .wizard > .steps ul.step-4:before {
    left: 55%;
    transition: all 0.5s ease; }
  .wizard > .steps ul.step-4:after {
    width: 60%;
    transition: all 0.5s ease; }  
  .wizard > .steps ul.step-5:before {
    left: 75%;
    transition: all 0.5s ease; }
  .wizard > .steps ul.step-5:after {
    width: 80%;
    transition: all 0.5s ease; }      
  .wizard > .steps ul.step-6:before {
    left: 95%;
    transition: all 0.5s ease; }
  .wizard > .steps ul.step-6:after {
    width: 100%;
    transition: all 0.5s ease; } 

.wizard > .steps ul li a span {
  position: absolute;
  color: #000000;
  text-align: center;
  top: 20px;
}
.wizard > .steps ul li a .number_1 {
  left: -5%;
  width: 100px;
}
.wizard > .steps ul li a .number_2 {
  left: 20%;
  width: 75px;
}
.wizard > .steps ul li a .number_3 {
  left: 30%;
  width: 85px;
}
.wizard > .steps ul li a .number_4 {
  left: 45%;
  width: 80px;
}
.wizard > .steps ul li a .number_5 {
  left: 69%;
  width: 80px;
}

.form-row {
  display: flex;
  margin-bottom: 29px;
  align-items: center; }
  .form-row:last-child {
    margin-bottom: 0; }
  .form-row label {
    width: 34.9%;
    margin-right: 40px; }
  .form-row .form-holder {
    width: 65.1%; }

.form-holder {
  position: relative; }
  .form-holder i {
    position: absolute;
    top: 10px !important;
    right: 20px;
    font-size: 25px; }

.form-control {
  height: 41px;
  border: 1px solid #000;
  background: none;
  border-radius: 5px;
  width: 100%;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.2); }
  .form-control:focus {
    box-shadow: 0px 0px 7px 0px rgba(255, 255, 255, 0.7);
    border: 1px solid #ceebf7; }
  .form-control::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.45);
    text-transform: uppercase; }
  .form-control::-moz-placeholder {
    color: rgba(0, 0, 0, 0.45);
    text-transform: uppercase; }
  .form-control:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.45);
    text-transform: uppercase; }
  .form-control:-moz-placeholder {
    color: rgba(0, 0, 0, 0.45);
    text-transform: uppercase; }

select.form-control {
  text-transform: uppercase; }

.option {
  color: #000; }

textarea.form-control {
  padding: 0 8px;
  height: auto;
  resize: vertical;
}

.actions ul {
  display: flex;
  margin-top: 39px;
  justify-content: space-between; }
.actions li a {
  padding: 0;
  border: none;
  display: inline-flex;
  height: 54px;
  width: 180px;
  letter-spacing: 1.3px;
  align-items: center;
  background: #000;
  font-family: "e-ukraine-bold" !important;
  cursor: pointer;
  position: relative;
  padding-left: 34px;
  text-transform: uppercase;
  color: #fff;
  border-radius: 27px;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s; }
  .actions li a:before {
    content: '\f2ee';
    font-size: 18px;
    position: absolute;
    top: 17px;
    right: 34px;
    font-family: Material-Design-Iconic-Font;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); }
  .actions li a:hover {
    color: #000000;
    opacity: 1;
    animation: 10s infinite granimate;
    visibility: visible;
    background-size: 200% 300%;
    background-color: transparent;
    background-image: linear-gradient(217deg,rgba(255,0,0,.8),rgba(255,0,0,0) 70.71%),linear-gradient(127deg,rgba(0,0,255,.8),rgba(0,0,255,0) 70.71%),linear-gradient(336deg,rgba(0,255,0,.8),rgba(0,255,0,0) 70.71%);
   }
    .actions li a:hover:before {
      -webkit-animation-name: hvr-icon-wobble-horizontal;
      animation-name: hvr-icon-wobble-horizontal;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1; }
.actions li[aria-disabled="true"] a {
  display: none;
  opacity: 0;
  transition: all 0.3s; }
.actions li:first-child a {
  width: 154px;
  background: #000;
  color: #fff;
  font-family: "e-ukraine-bold" !important;
  padding-left: 57px; }
  .actions li:first-child a:before {
    content: '\f2ea';
    left: 32px;
    font-size: 18px; }
  .actions li:first-child a:hover {
    color: #000000;
    opacity: 1;
    animation: 10s infinite granimate;
    visibility: visible;
    background-size: 200% 300%;
    background-color: transparent;
    background-image: linear-gradient(217deg,rgba(255,0,0,.8),rgba(255,0,0,0) 70.71%),linear-gradient(127deg,rgba(0,0,255,.8),rgba(0,0,255,0) 70.71%),linear-gradient(336deg,rgba(0,255,0,.8),rgba(0,255,0,0) 70.71%);
   }
.actions li:last-child a {
  width: 225px; }

@-webkit-keyframes hvr-icon-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px); }
  33.3% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px); }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px); }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px); }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes hvr-icon-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px); }
  33.3% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px); }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px); }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px); }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
.checkbox-circle.type {
  display: block !important;
  justify-content: space-between; }    
.checkbox-circle {
  display: flex;
  justify-content: space-between; }
  .checkbox-circle label {
    cursor: pointer;
    display: inline-block;
    padding-left: 23px;
    position: relative;
    margin-right: 0;
    width: auto; }
  .checkbox-circle input {
    position: absolute;
    opacity: 0;
    cursor: pointer; }
  .checkbox-circle input:checked ~ .checkmark:after {
    display: block; }
  .checkbox-circle .checkmark {
    position: absolute;
    top: 4px;
    left: 0;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    border: 1px solid #000; }
    .checkbox-circle .checkmark:after {
      content: "";
      top: 3px;
      left: 3px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #000;
      position: absolute;
      display: none; }

@media (max-width: 1500px) {
  form {
    padding-bottom: 97px;
    align-self: flex-start; }

  .wrapper {
    height: auto; } }
@media (max-width: 1199px) {
  .wrapper {
    width: auto; }

  .image-holder {
    align-self: center; }
    .image-holder img {
      transform: translateY(40px); }

  form {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 50px;
    padding-right: 50px;
    align-self: center; } }
@media (max-width: 991px) {
  .wrapper {
    justify-content: center; }

  .image-holder {
    display: none; }

  form {
    width: auto; }
    
  .wizard > .steps ul li a .number_1 {
    left: -4%;
    width: 100px;
  }
}
@media (max-width: 767px) {
  body {
    height: auto; }

  .wrapper {
    height: auto;
    padding: 30px 20px; }

  #wizard {
    border: none;
    display: flex;
    flex-direction: column;
    background: none; }

  form, #wizard {
    padding: 0; }

  h3 {
    margin-bottom: 10px; 
    margin-top: 15px;
  }

  .form-row {
    display: block; }
    .form-row label {
      margin-bottom: 29px;
      display: block; }
    .form-row label, .form-row .form-holder {
      width: 100%; }

  .checkbox-circle {
    display: block; }

  .wizard > .steps {
    order: 3;
    margin-top: 60px;
    margin-bottom: 20px; }
    .wizard > .steps ul {
      position: static;
      transform: translateX(0);
      width: 100%; }
  .wizard > .steps ul li a .number_1 {
    left: -2%;
    width: 100px;
  }
  .wizard > .steps ul li a .number_2 {
    left: 20%;
    width: 75px;
  }
  .wizard > .steps ul li a .number_3 {
    left: 34%;
    width: 85px;
  }
  .wizard > .steps ul li a .number_4 {
    left: 48%;
    width: 80px;
  }
  .wizard > .steps ul li a .number_5 {
    left: 73%;
    width: 80px;
  }
  .actions ul {
    /*flex-direction: column;
     align-items: flex-end;
    margin-top: 0; */ }
  .actions li a {
    height: 44px; }
    .actions li a:before {
      top: 13px; }
  .actions li:first-child a {
    margin-bottom: 20px; 
    padding-left: 40px;
    width: 125px;} 
  .actions li:first-child a:before {
    left: 15px;} 
  .actions li a[href="#next"] {
    margin-left: 20px; 
    width: 160px;} 
  .actions li:last-child a {
    width: 180px; 
    padding-left: 25px;
    margin-left: 10px;}
  .actions li:last-child a:before {
    right: 12px; }  
  }
@media (max-width: 440px) {
  .wizard > .steps ul li a .number_1 {
    left: -4%;
    width: 95px;
  }
  .wizard > .steps ul li a .number_2 {
    left: 21%;
    width: 75px;
  }
  .wizard > .steps ul li a .number_3 {
    left: 35%;
    width: 85px;
  }
  .wizard > .steps ul li a .number_4 {
    left: 50%;
    width: 80px;
  }
  .wizard > .steps ul li a .number_5 {
    left: 75%;
    width: 80px;
  }
}
@media (max-width: 374px) {
  .phone-contact {
    margin-top: 5px;
  }
}
.has-success .checkbox,.has-success .checkbox-inline,.has-success .control-label,.has-success .help-block,.has-success .radio,.has-success .radio-inline,.has-success.checkbox label,.has-success.checkbox-inline label,.has-success.radio label,.has-success.radio-inline label {
    color: #3c763d
}

.has-success .form-control {
    border-color: #3c763d;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
}

.has-success .form-control:focus {
    border-color: #2b542c;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168
}
.has-error .checkbox,.has-error .checkbox-inline,.has-error .control-label,.has-error .help-block,.has-error .radio,.has-error .radio-inline,.has-error.checkbox label,.has-error.checkbox-inline label,.has-error.radio label,.has-error.radio-inline label {
  color: #a94442;
}

.has-error .form-control {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075)
}

.has-error .form-control:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483
}

#order label{
  margin: 0 !important;
  display: unset !important;
}
#order li{
  font-family: unset !important;
  letter-spacing: unset !important;
}

#datepicker{
  padding: 0 18px !important;
  border: 1px solid #000;
}

#add2home {
  padding: 10px;
  border: none;
  display: inline-flex;
  height: 65px;
  letter-spacing: 1.3px;
  align-items: center;
  background: #000;
  font-family: "e-ukraine-bold" !important;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  color: #fff !important;
  border-radius: 27px;
}