* {
    box-sizing: border-box;
  }

  /*the container must be positioned relative:*/
  .autocomplete {
    position: relative;
    display: inline-block;
  }

  input,
  select {
    border: 1px solid transparent;
    background-color: #fff;
    padding: 10px;
    width:100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #efefef;
  }

  select {
    padding:8px;
  }

  /*input[type=text] {
    background-color: #fff;
    width: 100%;
  }*/

  .autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    max-height:213px;
    overflow:scroll;
  }

  .autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff; 
    border-bottom: 1px solid #d4d4d4; 
  }

  /*when hovering an item:*/
  .autocomplete-items div:hover {
    background-color: #e9e9e9; 
  }

  /*when navigating through the items using the arrow keys:*/
  .autocomplete-active {
    background-color: #EE6403 !important; 
    color: #ffffff; 
  }

  #output-message,
  #carbon-calculator {
     float:left;
     width:100%;
     border:2px solid #000;
     padding:5%;
     background:#f8f8f8;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
     border-radius: 6px;
     box-sizing:border-box;

  }

 #output-message {
     margin-top:100px;
     display:none;
     border:2px solid #EE6403;
     background:#fff;
 }


  #flight-info h3 {
     padding-top:30px;
     margin:50px 0 15px 0;
     border-top:1px solid #ccc;
  }

  .flight {
    display:block;
  }

  .container {
      width:92%;
      max-width:800px;
      margin:50px auto;
      padding:0;
    }

  .form-group {
    width:48%;
    margin:0 1% 35px;
    float:left;
    position:relative;
  }  

  #carbon-calculator h2 {
    margin-bottom:50px;
  }

  #add-flight {
    float:right;
    color:#ee6400;
    margin-top:-15px;
    font-weight:bold;
  }

  label {
    width:100%;
    margin-bottom:5px;
    float:left;
  }

  #calculate-btn {
    margin-top:30px;
  }

  .carbon-step {
    width:48%;
    margin-right:4%;
    background:#fff;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
    overflow:hidden;
    text-align:left;
    position:relative;
  }

  .carbon-step:nth-child(2n+2){
    margin-right:0;
  }

  .carbon-step p{ 
    margin:0;
  }

  .carbon-step .impact-title{
    font-size:70px;
    padding: 10% 60px 0 40px;
    width:30%;
  }

  .carbon-step-content {
    margin:30px 30px 30px 35%;
  }

  .carbon-step-content h3 {
    text-transform:uppercase;
    font-size:30px;
    font-weight:900;
    margin:0 0 15px;
  }

 .carbon-step-content h3 .h3-sm {
    display:block;
    color:#ec6623;
    font-size:20px;
    text-transform:none;
    font-weight:500;
 }

.program-link {
  text-decoration: none;
  margin:20px 0 35px;
}



 @media only screen and (max-width:1200px) {
  .carbon-step {
    width:100%;
    margin:0 0 20px;
  }

  .carbon-step-content h3 {
    font-size:25px;
  }

 .carbon-step-content h3 .h3-sm {
    font-size:18px;
 }

 .carbon-step .impact-title {
  padding-top:5%;
  padding-left:30px;
  width:15%;
  font-size:55px;
 }

 .carbon-step-content {
    margin:20px 20px 20px 18%;
  }
 }

  @media only screen and (max-width:900px) {
    .carbon-step .impact-title {
      padding:15px 20px;
      position:relative;
      float:left;
      width:auto;
      font-size:45px;
    }

    .carbon-step-content {
      margin-left:20px;
      float:left;
      width:70%;
    }

    .carbon-step-content h3 {
      font-size:22px;
    }

    .carbon-step-content h3 .h3-sm {
      font-size:17px;
   }
  }

  @media only screen and (max-width:500px) {
    .carbon-step-content {
      width:60%;
    }

    .carbon-step-content h3 .h3-sm {
      font-size:14px;
   }
  }