#tripPlanner { position: relative; margin: 2em 0 0; box-sizing: border-box; min-height: 561px;}
#tripPlanner .bgWrap { min-height: 530px; overflow: hidden; position: relative; height: 100%; display: none;}
#tripPlanner .bgImg { height: 100%; position: absolute; width: 100%; background-position: 30% 50%; background-size: cover; }
#tripPlanner .bgOverlay { height: 100%; position: absolute; width: 100%; background-image: url('../Images/Overview/tripPlannerBGColor.png');}
#tripPlanner .topGradient { background-image: url('/Images/Home/HeroTripPlanner/gradient-inverse.png'); height: 169px; width: 100%; position: absolute; top: 0; left: 0; opacity: .5; }
#tripPlanner .contentWrap { position: relative; width: 100%; box-sizing: border-box; /* margin-top: -530px; */ /* height: 530px; */ padding: 1em 30px; background-color: #0069BC;}
#tripPlanner .contentPosition { position: absolute; bottom: 0px; width: 100%; }
#tripPlanner .titleWrap { height: 169px; background-image: url('/Images/Home/HeroTripPlanner/gradient.png'); background-repeat: repeat-x;  /* padding: 0 1em; */ vertical-align: bottom; position: relative; box-sizing: border-box;  /* opacity: .5; */ }
#tripPlanner .textPositioner { position: absolute; bottom: 0px; width: 100%; box-sizing: border-box; padding: 0 1em; }
#tripPlanner .heroTitle { text-align: right; color: white; font-size: 24px; font-weight: 300; margin-bottom: 0.2em; }
#tripPlanner .heroSubtitle { text-align: right; color: white; font-size: 14px; font-weight: 700; text-transform: uppercase; margin-bottom: 1em; }

/*Trip Planner section*/
#tripPlanner .tripPlanner { position: relative; min-height: 126px; width: 100%;}
#tripPlanner .bgColor { background-color: #2C2C2C; position: absolute; height: 100%; width: 100%; z-index: 0; }
#tripPlanner .tpTitle{
    color: white;
    font-size: 30px;
    font-weight: 200;
    text-align: center;
    margin: 1em 0 0.25em;
}
#tripPlanner .tpText { position: relative; color: white; padding: 1.2em 1em 0.5em 0.6em; font-size: 36px; font-weight: 100; display: inline-block; margin: 0; }
#tripPlanner .tripPlannerForm { display: none; }
#tripPlanner .tpInput {  transition:0.25s; background-color: white; float: left; padding: 0.5em 1.5em; font-weight: 100; height: 70px; box-sizing: border-box; width: 100%; border: 1px solid #dfe7f1; color: #242424; margin-top: 15px; }
#tripPlanner .tpInput.current { border: 1px solid #bfcad8; color: #0069bc;  }
#tripPlanner .tpInput.error {
    border: 1px solid #C32611;
    color: #C32611;
    margin-bottom: 0;
}
#tripPlanner .tpInput label { display: block; font-weight: 400; margin-top: 4px; color: #92a0a6; font-size: 12px; line-height: 1; transition:0.25s;}
#tripPlanner .tpInput.error label { color:#C32611; }
#tripPlanner .tpInput input { border: 0px; font-size: 1.5em; font-weight: 400; margin: 1px 0; color: inherit; width: 100%; font-size: 18px; background-image: none; transition:0.25s;}
#tripPlanner .tpInput.current input::-webkit-input-placeholder {color:    #BBB;}
#tripPlanner .tpInput.current input:-moz-placeholder { color:    #BBB; opacity:  1;}
#tripPlanner .tpInput.current input::-moz-placeholder { color:    #BBB; opacity:  1; }
#tripPlanner .tpInput.current input:-ms-input-placeholder { color:    #BBB;}
#tripPlanner .tpInput.error input::-webkit-input-placeholder {color:    #C32611;}
#tripPlanner .tpInput.error input:-moz-placeholder { color:    #C32611; }
#tripPlanner .tpInput.error input::-moz-placeholder { color:    #C32611; }
#tripPlanner .tpInput.error input:-ms-input-placeholder { color:    #C32611;}
#tripPlanner .tpDateTime input{
  background-image: url('/Images/global/arrowDownBlue.png');
  background-repeat: no-repeat;
  background-position: 100% 48%;
  padding-right: 0;
  /* margin-right: 14px; */
  background-color: #FFF;
}
  
#tripPlanner .tpRadio { float: left; overflow: hidden; box-sizing: border-box; padding: 0.5em 0 !important; position: relative; }
#tripPlanner .tprOption { display: inline-block; padding: 0; border-left: 1px solid #CCC; margin-left: -1px; width: 50%; box-sizing: border-box; height: 55px; cursor: pointer; }
#tripPlanner .tprOption.selected { }
#tripPlanner .tprOption i { font-size: 15px; color: #FFFFFF; text-align: center; width: 100%; margin-top: 8px; transition: 0.25s;}
#tripPlanner .tprOption.selected i { color: #0069bc; }
#tripPlanner .blueCheck { width: 100%; height: 10px; background-repeat: no-repeat; background-position: 50% 50%; margin: 12px 0 8px; }
#tripPlanner .tprOption.selected .blueCheck { background-image: url('/Images/global/blueCheck.png'); }
#tripPlanner .tpRadio label { padding-bottom: 0px; font-weight: 500; color: #97a3a9; font-size: 14px; cursor: pointer; text-align: center; transition: 0.25s;}
#tripPlanner .tprOption.selected label { color: #242424; }
#tripPlanner .tpRadio input { display: none; }
#tripPlanner .tpDateTime { float: left; width: 46.5%; margin-right: 7%;}
#tripPlanner .tpDate { }
#tripPlanner .tpTime {
    margin-right: 0;
 }
#tripPlanner .tpDateTime label { }
#tripPlanner .tpDateTime i { /* float: right; */ /* margin-top: 2px; */ font-size: 12px; color: #333; }
#tripPlanner .tpdtTextWrap {    /* overflow: hidden; */ }
#tripPlanner .blueDownArrow { }
#tripPlanner .tpdtText { border: 0px; font-size: 1.5em; font-weight: 400; color: #242424; margin: 5px 0; font-size: 18px; overflow: hidden; }
#tripPlanner .tpBtn { clear: both; margin: 2.25em auto; text-transform: uppercase; text-align: center; padding: 1em 0.5em 0.9em; font-size: 14px; color: #FFFFFF; font-weight: 500; cursor: pointer; background-color: #2c2c2c;}
#tripPlanner .tpBtn i { margin-left: 0.75em; display: inline; position: relative; /* top: -1px; */ color: #2ac5fe; font-weight: bold; font-size: 18px;}

@media (max-width:991px){
    #tripPlanner .tpTitle{
        font-size: 24px;
    }
}
@media (max-width:820px){
    #tripPlanner .tpTitle{
        font-size: 22px;
    }
}
@media (max-width:767px){
    #tripPlanner{
    margin: 2em -15px 0;
}
#tripPlanner .contentWrap {
    padding: 1em;
 }
    #tripPlanner .tpTitle{
        font-size: 30px;
    }
    #tripPlanner .tpInput {
    padding: 0.5em 0.75em;
}
#tripPlanner .tpInput input {font-size: 15px;}
}