* {

  box-sizing: border-box;

}



.container {

  padding: 0 50px;

}



body {

  font-family: sans-serif;

  align-items: center;

  justify-content: center;

  background: #f7f7f7;

}

/* #hero {

  width: 100%;

  height: 350px;

  position: relative;

  display: block;

  background: url('../img/hangersuit.jpg');

  background-size: cover;

  -webkit-background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

} */



#hero{

  width: 100%;

  height: 400px;

  display: inline-flex;

  background-image: url('form-banner.jpg');

  background-position-y: top;

  background-position: center;  

	background-repeat: no-repeat;	

	background-size: cover;

  text-align: center;

  /* background-attachment: fixed; */

}



.hero_banner img {

  width: 550px;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  margin: auto;

  cursor: pointer;

}



.text_wrapper h1 {

  font-size: 40px;

  font-weight: bold;

}



form {

  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  background: #fff;

  padding: 60px;

  /* width: 750px;

  max-width: calc(100% - 60px); */

}



@media only screen and (max-width: 600px) {

  form {

    padding: 10px;

  }

  #hero {

    height: 220px;

  }

}



label.otherOpt {

  display: flex;

}



.form-element {

  display: flex;

  flex-direction: column;

  margin-bottom: 30px;

}



.form-element.checkbox {

  margin-bottom: auto;

}



.form-element span {

  margin-bottom: 10px;

}



.form-element.form-element.inquiries {

  width: fit-content;

}



.form-element.inquiries a {

  color: black;

  /* transition: all 0.3s ease; */

}



.form-element.inquiries a:hover {

  color:#26a69a;

  /* transition: all 0.3s ease; */

}



.form-element.inquiries a:hover i.fa-arrow-right-long {

  transform: translateX(5px) scale(1.1);

  transition: all 0.1s ease;

}



.form-element.inquiries i.fa-arrow-right-long {

  transition: all 0.1s ease;

}



.date, .time {

  margin-bottom: 30px;

}



.time .row,

.date .row {

  display: flex;

}



.time label p,

.date label p {

  font-size: 14px;

  /* color: #000; */

  margin-right: 15px;

}



.number {

  /* margin:100px; */

  display: flex;

}

.minus, .plus, .minus-s, .plus-s,

.minus-m, .plus-m, .minus_suitS, .plus_suitS,

.minus_suitM, .plus_suitM, .minus_suitL, .plus_suitL, 

.minus_face, .plus_face  {

  cursor: pointer;

  width: 20px;

  height: 32px;

  background:#f2f2f2;

  /* border-radius: 4px; */

  padding:4px 5px 8px 5px;

  border: 1px solid #ddd;

  display: inline-block;

  vertical-align: middle;

  text-align: center;

}



.number .item {

  margin-left: 10px;

  padding: 6px;

  color: rgb(35, 34, 34);

  font-size: 15px;

}



input.counter {

  height: 30px !important;

  width: 30px !important;

  text-align: center;

  font-size: 14px !important;

  /* border-top: 1px solid #ddd !important; */

  border: 1px solid #ddd !important;

  /* border-radius: 4px !important; */

  display: inline-block;

  vertical-align: middle;

}



.suit-selected {

  border: 1px solid red !important;

  z-index: 99999;

}



.radio-buttons {

  margin-top: 30px;

}



.other-active {

  border-bottom: 1px solid #26a69a !important;

  transition: all 2s ease;

}



.disabled {

  pointer-events: none;

  cursor: default;

  opacity: 0.6;

}



.suit-option-hidden {

  display: none;

  visibility: hidden;

  /* display: grid; */

}

.input_count {

  border: 1px solid red !important;

}



input#__other_option__ {

  margin-left: 20px;

}



.column {

  float: left;

  width: 50%;

  padding: 0 10px;

}



/* Remove extra left and right margins, due to padding */

.row {margin: 0 -5px;}



/* Clear floats after the columns */

.row:after {

  content: "";

  display: table;

  clear: both;

}



/* Responsive columns */

@media screen and (max-width: 600px) {

  .column {

    width: 100%;

    display: block;

    margin-bottom: 20px;

  }

  .container {

    padding: 0 5px;

  }

  .hero_banner {

    background-position: center top;

  }

  .hero_banner img {

    width: 250px;

  }

}



/* Style the counter cards */

.cards {

  box-shadow: 0 2px 20px 0 rgb(0 0 0 / 10%);

  padding: 16px;

  text-align: center;

  background-color: #fff;

  border-radius: 5px;

  border-top: 5px solid orange;

  margin-top: 20px;

  height: 270px;

}



.cards p {

  text-align: left;

  font-weight: bold;

}



.cards h6 {

  font-weight: bold;

}



ul li {

  text-align: left;

  list-style-type: square !important;

  margin-left: 20px;

  line-height: 1.8;

}



.term {

  font-size: 13px;

}



.term p {

  font-weight: bold;

}



.btn {

  background: #FEB404 !important;

}



hr {

  margin: 50px 0;

}





.btn-loading {

  display: none;

}



.btn-onload {

  display: none;

}



.d-none {

  display: block;

}