.hero {
  position           : relative;
  z-index            : 1;
  display            : -webkit-box;
  display            : -ms-flexbox;
  display            : flex;
  height             : 400px;
  background-image   : url("../../assets/ad-game/hero-bg.jpg");
  background-repeat  : no-repeat;
  background-position: 100% 20%;
  background-size    : cover;
  align-items        : center;
}

.hero-car {
  position: absolute;
  z-index : 2;
  top     : 0;
  right   : 0;
}

.ad-h2 {
  font-family   : 'Bebas', sans-serif;
  font-family: "PragmaticaLightC";
  font-size     : 36px;
  font-weight   : normal;
  margin-bottom : 15px;
  text-transform: uppercase;
  color         : #ed6b21;
  margin-top    : 20px;
}

main {
  font-family: 'Bebas', sans-serif;
  font-family: "PragmaticaC";
  line-height: normal;
  padding    : 30px 0;
}

p.lead {
  font-size     : 18px;
  margin        : 0 0 15px;
  letter-spacing: normal;
  color         : #333;
  font-family   : "LetoSans";
  font-style    : normal;
  font-weight   : 200;
}

.steps {
  font-family: 'LetoSans';
  font-weight: 200;
  margin     : 20px 0;
  background-color: #fff;
}

.steps li {
  position: relative;
  display : inline-block;
  padding : 10px 30px;
  cursor  : pointer;
  color   : white;
}

.steps li.active {
  background-color: #ed6b21;
  font-family: "PragmaticaC";
}

.steps li::before {
  position     : absolute;
  z-index      : 2;
  top          : -10.5px;
  bottom       : 0;
  left         : 0;
  width        : 0;
  height       : 0;
  content      : '';
  border-top   : 29px solid transparent;
  border-bottom: 30px solid transparent;
  border-left  : 15px solid white;
  box-shadow: none;
}

.steps li::after {
  position     : absolute;
  z-index      : 1;
  top          : -9.5px;
  right        : 0;
  bottom       : 0;
  width        : 0;
  height       : 0;
  content      : '';
  border-top   : 29px solid white;
  border-bottom: 22px solid white;
  border-left  : 15px solid transparent;
  box-shadow: none;
}

.steps li:first-child::before {
  border: 0;
}

.steps li {
  margin-left: -5px;
}

.steps li:first-child {
  margin : 0;

}

.steps li.undone {
  cursor          : not-allowed;
  background-color: #999;
  font-family: "PragmaticaC";
}

.steps li.done {
  background-color: #ed6b21;/*#0e8f42*/;
}

.ad-form-denied,
.ad-form-one,
.ad-form-success,
.ad-form-two {
  margin-bottom: 40px;
  padding      : 40px;
  border       : 1px solid gray;
}

.ad-form-denied {
  font-family   : 'Bebas', sans-serif;
  color         : red;
  letter-spacing: 2px;
}

.ad-h3 {
  font-size    : 24px;
  font-weight  : normal;
  margin-top   : 0;
  margin-bottom: 15px;
  color        : #333;
  font-family: "PragmaticaC";
  color: #7d7d7d;
}

.ad-h3-orange-center {
  font-size    : 36px;
  margin-top   : 0;
  margin-bottom: 30px;
  text-align   : center;
  color        : #ed6b21;
}

.form-section {
  width        : 100%;
  margin-bottom: 30px;
}

.form-section:first-child input {
  margin-bottom: 15px;
}

.string-input-group {
  display              : grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap      : 10px;
}

.block-input-group {
  display: grid;
}
@media (max-width: 274px) {
  .steps {
margin: -10px 0;
  }
}

@media (max-width: 274px) {
  .undone {
margin-top:-29px;
  }
}

@media (max-width: 274px) {
  .steps li {
    font-size: 10px !important;
    border-bottom: 29px solid white;
    border-top: 29px solid white;
  }
}

@media (max-width: 600px) {
  .string-input-group {
    display              : grid;
    grid-template-columns: 1fr;
    grid-column-gap      : 10px;
    grid-row-gap         : 10px;
  }
}

@media (max-width: 510px) {
  .col a {
    font-size: 14px;
  }
}

@media (max-width: 410px) {
  .col a  {
    font-size: 11px;
  }
}
@media (max-width: 350px) {
  .col a  {
    font-size: 9px;
    padding: 11px 2px;
  }
}

.mini-text {
  font-family: 'LetoSans';
  font-family: "PragmaticaC";
  font-size  : 12px;
  font-weight: 200;
  color      : gray;
}

.margin-top-minus-10px {
  margin-top: -10px;
}

.ad-form-one input,
.ad-form-two input,
select,
select {
  height          : 35px;
  padding         : 0 10px;
  border          : 1px solid gray;
  border-radius   : 0 !important;
  background-color: transparent;
  width           : 100%;
  font-family     : Tahoma, sans-serif;
  font-family: "PragmaticaC";
  font-size       : 15px;
  color: #7d7d7d;
}

.form-control {
  border     : 1px solid gray;
  font-family: Tahoma, sans-serif;
  font-size  : 15px;
  font-family: "PragmaticaC";
  color: #7d7d7d;
}

.ad-form-one input[type='checkbox'] {
  height : auto;
  display: inline-block;
  width  : auto;
}

#finish,
#next {
  font-family     : 'LetoSans';
  font-weight     : normal;
  padding         : 10px 30px;
  cursor          : pointer;
  text-transform  : uppercase;
  color           : white;
  border          : 0;
  background-color: #ed6b21;
}

#next:hover {
  background-color: #f76e20;
}

#next:active {
  background-color: #de641e;
}

.disable {
  /* pointer-events  : none; */
  cursor          : not-allowed !important;
  background-color: #999 !important;
}

.agree-text {
  font-size     : 18px;
  letter-spacing: 1px;
  color         : #ed6b21;
  font-family: "PragmaticaC";
}

.agree-text a {
  color        : #ed6b21;
  border-bottom: 1px dotted #ed6b21;
}

.orange-block-grid {
  margin: 40px 0;
}

.orange-block-grid .col {
  margin-right: 5px;
}

.orange-block-grid .col:last-child {
  margin-right: 0;
}

.orange-block {
  font-size       : 20px;
  display         : flex;
  align-items     : center;
  flex-direction  : column;
  padding         : 15px 5px;
  text-align      : center;
  color           : white;
  background-color: #ed6b21;
  transition      : background-color linear 100ms;
}

.orange-block:hover {
  background-color: rgb(76, 76, 76);
  text-decoration : none;
  color           : white;
}

.icon {
  width            : 25px;
  height           : 25px;
  background-image : url("../../assets/buttons_icons.png");
  background-repeat: no-repeat;
  background-size  : cover;
}

.auto {
  background-position: 0 0;
}

.finance {
  background-position: 0 -75px;
}

.tradein {
  background-position: 0 -125px;
}

.find {
  background-position: 0 -50px;
}

#main_box::after {
  height: 0;
}

.calendar-grid {
  display              : grid;
  grid-template-columns: auto 1fr;
}

@media (max-width: 710px) {
  .calendar-grid {
  display : block;
}
}


.ad-form-two {
  display       : -webkit-flex;
  display       : -ms-flex;
  display       : flex;
  flex-direction: row;
  flex-wrap     : wrap;
}

.hidden {
  display: none;
}

.time-container{
  margin-top: 30px;
}

.calendar {
  font-family : 'LetoSans';
  font-weight : normal;
  margin-right: 15px;
  padding     : 15px;
  border      : 1px dashed silver;
}


.mr-2 {
  margin-right: 10px;
}

.highlighted {
  background-color: transparent !important;
  border          : 1px dotted gray;
}

.picked {
  background-color: #ed6b21 !important;
  color           : white !important;
}

input[type='number'] {
  -moz-appearance: textfield;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

input,
select {
  box-shadow: none !important;
}

.col-md-3,
.menu-dropdown li .col-md-9,
.price {
  padding: 0;
}

.phone {
  font-family: 'LetoSans';
  font-weight: 300;
  float      : left;
  padding    : 0 15px;
}

.add-info {
  font-family: 'LetoSans';
  font-weight: 300;
  font-size  : 16px;
}

.add-info > li,
.add-info > ol {
  list-style: decimal inside;
  padding   : 0;
  font-size : 14px;
}

.add-info > h2 {
  font-family: 'LetoSans';
  font-weight: normal;
  font-size  : 16px;
}

.add-info > p {
  font-size: 14px;
}

article ul {
  padding: 0;
}

.car-radio-label {
    display: block;
    font-size: 20px;
    margin-bottom: 12px;
}

.car-radio-label input {
    width: 10px;
    height: 10px;
}

.car-unavailable-label {
    margin-left: 10px;
    font-family: 'LetoSans';
    font-size: 12px;
    font-weight: 200;
}

@media only screen and (max-width: 900px) {
  div.col-4.mobiles {
    margin: 0 auto;
    flex: 0 0 100%;
    max-width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
} 
@media only screen and (max-width: 670px) {
  div.row.no-gutters.mobiles {
    flex-direction: column !important;
    height: 350px !important;
  }
}