@font-face {
  font-family: Roboto-Regular;
  src: url("../fonts/Roboto-Regular.ttf");
}
@font-face {
  font-family: Roboto-Bold;
  src: url("../fonts/Roboto-Bold.ttf");
}
@font-face {
  font-family: "Roboto Slab-Thin";
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/RobotoSlab/Roboto-Thin.ttf");
}
@font-face {
  font-family: "Roboto Slab-Light";
  src: url("../fonts/RobotoSlab/Roboto-Light.ttf");
}
@font-face {
  font-family: "Roboto Slab-bold";
  src: url("../fonts/RobotoSlab/Roboto-Bold.ttf");
}

body {
  margin: 0px;
  padding: 0px;
}
* {
  box-sizing: border-box;
}
a {
  cursor: pointer;
}
header {
  position: fixed;
  left: 0;
  width: 100%;
  top: 0;
  z-index: 999;
  min-height: 96px;
  background-color: #181818;
}
header .logo {
  display: inline-block;
  padding-left: 44px;
  padding-bottom: 9px;
}
.container-fuild {
  padding-top: 30px;
}
.container-fuild .single-img {
  padding: 120px 20px 70px 20px;
}
.container-fuild img {
  width: 100%;
}
.text-wrappr {
  width: 66.8%;
  margin: 0px auto;
}
.text-wrappr .text-dyanmic {
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 30px;
  margin-bottom: 50px;
}
a.btn:hover {
  opacity: 0.7;
}
.step {
  display: flex;
  align-items: center;
  color: #999999;
}
.step p {
  margin: 0px;
  padding-left: 5px;
  font-size: 1.3vw;
  font-family: Roboto-Regular;
  color: #666666;
}
.step span {
  width: 4.6vw;
  height: 4.6vw;
  background-color: #f7f0ea;
  border-radius: 50%;
  font-size: 3.1vw;
  font-family: Roboto-Bold;
  display: flex;
  justify-content: center;
  color: #c5c5c5;
  line-height: 4.6vw;
}
.container .btns {
  margin: 30px 0px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.text-wrappr {
  color: #666;
}
.text-wrappr .text-dyanmic {
  font-size: 18px;
}
.container .btns a.btn {
  background: linear-gradient(
    to bottom,
    rgba(247, 131, 42, 1) 0,
    rgba(220, 84, 6, 1) 100%
  ) !important;
  color: #fff !important;
  font-weight: 800;
  font-family: Arial, Helvetica, sans-serif !important;
  padding: 1vw 2.2vw;
  margin-right: 15px;
  font-size: 1.9vw;
  border-radius: 6px;
  height: auto;line-height: normal;
}
.container .btns input {
  background-color: #ff9000;
  color: #fff !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.9vw;
  border: none;
  padding: 2.4vw 1.2vw;
  font-weight: 800;
  text-align: center;
  border-radius: 6px;
}
.container .btns input::placeholder {
  color: #ffffff;
}
.container .btns .col-xs-3 {
  margin-left: 8vw;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
.payment-section {
  background-color: #eaeaea;
  padding: 60px 0px;
}
.payment-section .main-title {
  height: 77px;
  margin: 0px auto;
  align-items: center;
  display: flex;
  width: 632px;
  justify-content: center;
  background: #e8d2c0;
  margin-top: 40px;
}
.payment-section .main-title p {
  color: #444444;
  text-align: center;
  margin-bottom: 0px;
  font-family: Roboto-Regular;
  font-size: 30px;
  font-weight: bold;
}
.method-payment {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 684px;
  margin: 20px auto;
}
input:focus::placeholder {
  color: transparent !important;
}
.btns a.active {
  border: 8px solid #e82828;
}
.method-one {
  display: flex;
  flex-direction: column;
  align-items: center;
/*  padding: 20px 40px;*/
  cursor: pointer;
  border: 15px solid #eaeaea;

}
.method-one h4{
    color: #444;
   text-align: center;
  font-size: 18px;
  letter-spacing: .5px;
  text-decoration: none;
}
.method-one:hover{
  text-decoration: none;
 -webkit-box-shadow: 0px 0px 15px 10px rgba(222,219,222,1);
-moz-box-shadow: 0px 0px 15px 10px rgba(222,219,222,1);
box-shadow: 0px 0px 15px 10px rgba(222,219,222,1);
}

form .icon-wrapper {
  display: flex;
  width: 100%;
  margin-bottom: 25px;
}
form .icon-wrapper p {
  align-self: flex-end;
  padding-left: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
.method-one img.authorize-img {
  width: 186px;
}
.method-two img.authorize-img {
  width: 180px;
}
.method-two {
  display: flex;
flex-direction: column;
align-items: center;
  cursor: pointer;
/*  padding: 20px 30px;*/
  border: 15px solid #eaeaea;
}
.method-two:hover{
  text-decoration: none;
  -webkit-box-shadow: 0px 0px 15px 10px rgba(222,219,222,1);
-moz-box-shadow: 0px 0px 15px 10px rgba(222,219,222,1);
box-shadow: 0px 0px 15px 10px rgba(222,219,222,1);
}
.method-two h4{
  color: #444;
  text-align: center;
  font-size: 18px;
  letter-spacing: .5px;
  text-decoration: none;
}
.method-two p {
  font-size: 14px;
  text-align: center;
 /* padding-top: 20px;*/
  text-decoration: none;
  color: #444444;
  margin-bottom: 0px;
}
.subtotal.main-title {
  background-color: #f7f0ea;
  width: 760px;
  height: 161px;
  margin-top: 60px;
}
.subtotal.main-title p {
  font-size: 22px;
  text-align: left;
  font-weight: normal;
  line-height: 30px;
}
.subtotal a {
  font-family: Roboto Slab-Light;
}

/****** Form *******/

form {
  /*display: none;*/
  width: 45vw;
  margin: 20px auto;
  height: auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 4vw 7vw;
  background-color: #ffffff;
}
form img.card-type {
  width: 30px;
  margin-right: 5px;
}
.display-form {
  display: flex;
}
a.display-link {
  text-decoration: none;
  -webkit-box-shadow: 0px 0px 15px 10px rgba(222,219,222,1);
-moz-box-shadow: 0px 0px 15px 10px rgba(222,219,222,1);
box-shadow: 0px 0px 15px 10px rgba(222,219,222,1);
}
a.display-link p {
  color: #e82828;
}
.input-group {
  width: 100%;
  text-align: left;
  margin: 22px 0vw;
  white-space: nowrap;
}

.your-billing{margin-top:33px;margin-bottom: 0px;}
.your-email{margin-top:44px;margin-bottom: 0px;}
.input-group-t {margin-top: 12px !important;margin-bottom: 0px;}
.remain-anonymous{margin-top: 44px !important}
.input-group input,select,textarea {
  display: block;
  padding: 1vw 1vw;
  border-radius: 4px;
  border: 1px solid #c1c1c1;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
}
textarea {
  height: 70px;
  overflow: hidden !important;
  resize: none !important;
}
.input-group .text-muted {
  padding-left: 5px;
}
.input-group label {
  color: rgb(71, 67, 67);
  font-family: Roboto-Regular;
  font-weight: normal;
  font-size: 16px;
}
.input-group .date-wrapper {
  display: flex;
  justify-content: space-between;
}
.input-group .date-wrapper select {
  width: 10vw;
}
form .account-icon {
  width: 30px !important;
  margin-bottom: 1vw;
}
.input-group .check-box {
  width: auto;
  display: inline;
}

select option[data-default] {
  color: #888;
}
.input-group.zip-code,
.input-group.phone {
  width: 50%;
  margin-right: auto;
  margin-top: 12px;
}
.submit-btn {
  color: #fff;
  border-radius: 0;
  border: 1px solid #ffffff;
  background: #e82828;
  font-size: 30px;
  height: 64px;
  padding: 10px 30px;
  font-family: Roboto-Regular;
  font-weight: 400;
  cursor: pointer;
  margin-right: auto;
  margin-top: 0vw;
}
.submit-btn:hover {
  background-color: #ffde00;
}
iframe {
  margin-right: auto;
  margin-top: 1.5vw;
}
small {
  color: #e74c3c;
  font-family: Arial, Helvetica, sans-serif;
  display: none;
  font-size: 16px;
}
.success input {
  border-color: #2ecc71;
}
.error input {
  border-color: #e74c3c;
}
.error small {
  display: inline;
}
.error select {
  border-color: #e74c3c;
}
/*
/ ******* ****** Footer ********** ** /
footer {
  background: #1b1b1b;
  padding: 14px 0 47px;
  min-height: 270px;
}
footer img {
  height: 85px;
  width: 332px !important;
  margin-top: 100px;
  margin-bottom: 10px;
}
footer .number {
  font-size: 85px;
  padding-top: 25px;
  margin-bottom: 40px;
}
footer p {
  line-height: 18px;
  color: #9899a1;
  font-size: 18px;
  font-family: "Roboto Slab-Thin";
}
footer .number a {
  font-weight: 700;
  color: #ffd545;
  text-decoration: none;
  line-height: 18px;
  font-family: "Roboto Slab-Thin";
}*/
.alert-section {
  background-color: #faefef;
  padding: 20px 30px;
  width: 112%;
}
.alert-section .alert-p p {
  font-size: 18px;
  color: #ff0000;
  font-family: Roboto-Bold;
  margin-bottom: 20px;
}
.alert-section p {
  font-size: 18px;
}
.alert-section .alert-p p span {
  font-family: "Roboto Slab-bold";
}
.check-section p,
.last-section p {
  font-family: Roboto-Regular;
  color: #444444;
}
.check-section p span {
  font-family: Roboto-Bold;
}
.text-wrappr h2 {
  margin-bottom: 20px;
  font-family: Roboto-Bold;
}
.last-section {
  margin-top: 40px;
}
.last-section p {
  font-size: 16px;
}
/***** Media Query *****/
@media only screen and (max-width: 950px) {
  form {
    width: 55vw;
  }
}
/***** Media Query *****/
@media only screen and (max-width: 798px) {
  .step span {
    width: 5.6vw;
    height: 5.6vw;
    font-size: 4vw;
    line-height: 5.6vw;
  }
  .step p {
    margin: 0px;
    padding-left: 5px;
    font-size: 2vw;
  }
  .payment-section .main-title {
    width: 88%;
    margin-top: 20px;
  }
  .subtotal.main-title {
    width: 90%;
  }
  .method-payment {
    width: 80%;
  }
  .method-two p {
    font-size: 1.7vw;
  }
  footer .number {
    font-size: 11vw;
  }
}
@media only screen and (max-width: 768px) {
  form {
    width: 70vw;
  }
  .input-group input,
  select,
  textarea {
    padding: 2vw 2vw;
  }
  .input-group {
    margin: 2vw 0vw;
  }
  .input-group .date-wrapper select {
    width: 25vw;
  }
  .text-wrappr {
    width: 85.8%;
  }
  /*header .logo {
    padding-left: 0px;
  }*/

  .container .btns a.btn{padding: 1.5vw 2vw;font-size: 2.4vw;}
  .container .btns input{padding: 3.4vw 1vw;font-size: 2.35vw}
  .text-wrappr .text-dyanmic {margin-bottom: 40px;}
  .container .btns{margin: 15px 0px}
  .your-billing{margin-top:33px;margin-bottom: 0px;}
  .your-email{margin-top:44px;margin-bottom: 0px;}
  .input-group-t {margin-top: 12px !important;margin-bottom: 0px;}
  .remain-anonymous{margin-top: 44px !important}
  .pay-method img{width: 100%}

  .method-one h4, .method-two h4{
  color: #444;
  text-align: center;
  font-size: 16px !important;
  letter-spacing: .5px;
  text-decoration: none;
}
.method-one,.method-two{
  border: none!important;
  padding: 5px 10px !important;
}

}
@media only screen and (max-width: 580px) {
  form {
    width: 75vw;
  }
  .input-group .date-wrapper select {
    width: 35vw;
  }
  .input-group {
    margin: 3vw 0vw;
  }
  .input-group input,
  select,
  textarea {
    padding: 3vw 2vw;
  }
  .submit-btn {
    margin-top: 3vw;
  }
  .method-payment {
    width: 86%;
  }
  .method-two p {
    font-size: 3.6vw;
  }
  .input-group .date-wrapper select {
    width: 26vw;
  }
  .payment-section .main-title p {
    font-size: 5.5vw;
  }
  .subtotal.main-title p {
    font-size: 3.8vw;
  }
  .step p {
    font-size: 3vw;
  }
  .step span {
    width: 6.6vw;
    height: 6.6vw;
    font-size: 5vw;
    line-height: 6.6vw;
  }
  .container .btns .col-xs-3{width: auto;}
  .container .btns a.btn {
    font-size: 4.3vw;
    padding: 1.5vw 2.2vw;
  }
  .btns div {
    margin-left: 0px !important;
    padding-left: 0px;
    margin-top: 20px;
  }
  .container .btns input {
    font-size: 4vw;
    width: 36vw;
    padding: 5vw 1.2vw;
  }
  .input-group label {
    font-size: 3vw;
  }
  .text-wrappr h2 {
    font-size: 6.8vw;
  }
  .method-one{padding: 10px 15px;}
  .method-two {padding: 10px 18px}
 
  .subtotal.main-title{height: 120px;}
  .container-fuild .single-img {
    padding: 95px 20px 40px 20px;
  }

  .your-billing{margin-top:33px;margin-bottom: 0px;}
  .your-email{margin-top:44px;margin-bottom: 0px;}
  .input-group-t {margin-top: 12px !important;margin-bottom: 0px;}
  .remain-anonymous{margin-top: 44px !important}
  .cvv-input{margin:6.6vw 0vw}
  .text-muted{white-space: normal;}
}
@media only screen and (max-width: 480px) {
  form {
    width: 90vw;
  }
  .input-group label {
    font-size: 3.8vw;
  } 
  .step span {
    width: 7.6vw;
    height: 7.6vw;
    font-size: 5vw;
    line-height: 7.6vw;
  }
  .step p {
    font-size: 4vw;
  }
  .container .btns input {
    font-size: 4vw;
    width: 35.5vw;
    padding: 4.4vw 1.2vw;
  }
  .container .btns a.btn {
    font-size: 4.3vw;
    margin-right: 2vw;
  }
  .method-payment,
  .subtotal.main-title {
    width: 100%;
  }
  footer img {
    width: 64% !important;
  }
}