@charset "utf-8";
/* CSS for Travel Homie 2.1 */


/* Color Scheme */

body {
  background: #eee /*url(../img/body_travelhomie.jpg) repeat-x */;
  color: #222;
}
body.no-bg-img {
  background: #eee;
}

#addNow {
  background: #eee;
}

strong {
  color: #000;
}

.white, .white strong {
  color: #fff;
}

.medium {
  color: #888;
}

.text-dark {
  color: #007eff;
}

.text-darker {
  color: #27211c;
}

.bg-dark {
  background: rgb(48,179,255);
  background: -moz-linear-gradient(left,  rgba(48,179,255,1) 0%, rgba(15,166,255,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(48,179,255,1) 0%,rgba(15,166,255,1) 100%);
  background: linear-gradient(to right,  rgba(48,179,255,1) 0%,rgba(15,166,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30b3ff', endColorstr='#0fa6ff',GradientType=1 );
  color: #fff;
}

.bg-darker {
  background: #001446;
  background: -moz-linear-gradient(left,  #001446 0%, #003bac 100%);
  background: -webkit-linear-gradient(left,  #001446 0%,#003bac 100%);
  background: linear-gradient(to right,  #001446 0%,#003bac 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001446', endColorstr='#003bac',GradientType=1 );
  color: #fff;
}

.bg-dark strong {
  color: #fff;
}

.bg-darker strong {
  color: #fff;
}

.bg-white {
  background-color: #fff;
}

a:not(.btn) {
  color: #007eff
}

#homeSlider {
  background: #007eff;
}

.chatSimulation .question .media-body span {
  background: #fff;
  color: #222;
}

.chatSimulation .answer .media-body span {
  background: #007eff;
  color:#fff;
}
.chatSimulation .answer .media-body span * {
  color:#fff;
}

.chatSimulation .question .media-body span:after {
  border-color: transparent #fff;
}

.chatSimulation .answer .media-body span:after {
  border-color: transparent #007eff;
}

#homeSlider .chatSimulation .answer .media-body span {
  background: #e6f3ff;
  color: #222;
}

#homeSlider .chatSimulation .answer .media-body span:after {
  border-color: transparent #e6f3ff;
}
#homeSlider .chatSimulation .answer .media-body span * {
  color:#222;
}

#footerNav a {
  color: rgba(255,255,255,0.5);
}

h4, .h4 {
  color: #645c55;
}

/* Buttons */

*:focus {
  box-shadow: none !;
  outline: none !important;
}

.btn {
  overflow:hidden;
  position:relative;
}

.btn:after {
  content:'';
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
  z-index:1;
}

.btn-primary {
  background: #0081ff;
  background: -moz-linear-gradient(top,  #0098ff 0%, #006af6 100%);
  background: -webkit-linear-gradient(top,  #0098ff 0%,#006af6 100%);
  background: linear-gradient(to bottom,  #0098ff 0%,#006af6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0098ff', endColorstr='#006af6',GradientType=0 );
  border-color: #0055c0 !important;
  text-shadow: 0 1px 0px rgba(0,0,0,.25);
}

.btn-primary:active, .btn-primary:active:focus, .btn-primary:hover:active {
  background: #0055c0;
}

.btn-primary .emoji {
  margin-right: 7px;
}

.btn-info {
  background: #eeeeee;
  background: -moz-linear-gradient(top,  #eeeeee 0%, #dddddd 100%);
  background: -webkit-linear-gradient(top,  #eeeeee 0%,#dddddd 100%);
  background: linear-gradient(to bottom,  #eeeeee 0%,#dddddd 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 );
  border-color: #ccc !important;
  color: #666 !important;
}

.btn-info:active, .btn-info:active:focus, .btn-info:hover:active {
  background: #ccc;
}

.btn-lg, .btn-group-lg>.btn {
  border-radius:30px;
  border-style: solid;
  border-width: 2px 2px 5px 2px;
  font-weight:700;
  padding: 10px 35px;
  font-size: 22px;
  line-height: 1.3333333;
}
.btn-lg:hover {
  border-width: 2px;
  margin-top:3px;
}
.btn-lg:active, .btn-lg:active:focus {
  border-width: 0;
  -webkit-box-shadow: inset 0 2px 0rgba(0,0,0,0.125);
  box-shadow: inset 0 2px 0 rgba(0,0,0,0.125);
  margin-top:7px;
  padding: 10px 37px;
}

@media screen and (min-width: 768px) {

  .btn-xxl {
    border-radius:50px;
    font-size: 28px;
    padding: 18px 55px;
  }
  
  .btn-xxl:active, .btn-xxl:active:focus {
    padding: 18px 57px;
  }

}

@media screen and (max-width: 767px) {
  .btn-lg, .btn-group-lg>.btn, .btn-lg:active, .btn-lg:active:focus {
    padding: 8px 22px;
    font-size: 20px;
  }
}

.btn img.emoji {
  max-height:22px;
}

@media screen and (max-width: 767px) {
  
  body.has-mobile-cta {
    padding-bottom: 42px;
  }
  
  .mobile-cta {
    border-radius:0;
    bottom:-50px;
    left:0;
    position: fixed;
    width:100%;
    transition:ease-in-out 0.2s bottom;
  }
  .mobile-cta.in {
    bottom:0;
  }
}

/* Typo */

body {
  font-family: 'Roboto', sans-serif;
  font-size:22px;
}
  @media screen and (max-width: 767px) {
    body {
      font-size:18px;
    }
  }

a:not(.btn):not(.phonenumber) {
  text-decoration: underline;
}

.phonenumber, .phonenumber * {
  color:inherit !important;
  text-decoration: none !important;
}

strong {
  font-weight: 900;
}

p {
  margin-bottom: 25px;
}

h1, .h1 {
  margin-bottom: 60px;
}

h2, .h2 {
  margin-bottom: 40px;
}

h4, .h4 {
  font-size: 22px;
}

h5, .h5 {
  font-size: 18px;
  font-weight:bold
}

h1+p {
  margin: -40px 0 40px;
}

span.subhead {
  display:block;
  font-size: 12px;
  margin-bottom:7px;
  text-transform:uppercase;
}

.smaller {
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  h1, .h1 {
    font-size:22px;
    margin-bottom:25px;
  }
  
  h2, .h2 {
    font-size:22px;
    margin-bottom:30px;
  }
  
  h4, .h4 {
    font-size: 20px;
  }
  
  h1+p {
    margin: 0px 0 40px;
  }
  
}


/* Grid */

.no-min-height {
  min-height: 0;
}

section {
  padding: 50px 0;
}

  @media screen and (max-width: 767px) {
    section {
      padding: 25px 0;
    }
  }

.dtable {
  display:table;
  width:100%;
}

.dtablecell {
  display:table-cell;
  vertical-align:middle;
}

.fullwidth {
  height:100%;
}

.height720 {
  height:720px;
}

  @media screen and (max-width: 767px) {
    .height720 {
      height:500px;
    }
  }

/* Various Elements */

.logo {
  margin-bottom:20px;
  max-width: 200px;
}
  @media screen and (max-width: 767px) {
    .logo {
      margin-bottom:-5px;
    }
  }

.header-logo {
  display:block;
  margin-top:30px;
}

.img-circle {
  border: 3px solid #fff;
}

img.emoji {
  margin-bottom:-4px;
  margin-top: -9px;
  max-height:32px;
}
  @media screen and (max-width: 767px) {
    img.emoji {
      max-height:25px;
    }
  }


img.pr {
  margin: 8px;
}
.chatSimulation {
  font-size:20px;
  list-style-type: none;
  margin-bottom: 60px;
  padding:0;
}

  @media screen and (max-width: 767px) {
    .chatSimulation {
      font-size:18px;
      margin-bottom: 30px;
    }
  }

.chatSimulation li+li {
  margin-top:20px;
}

  @media screen and (max-width: 767px) {
    .chatSimulation li+li {
      margin-top:15px;
    }
  }

.chatSimulation img {
  height:45px;
  width: 45px;
}

.chatSimulation img.emoji {
  max-height:27px;
  width:auto;
}
  @media screen and (max-width: 767px) {
    .chatSimulation img.emoji {
      max-height:23px;
    }
  }
.chatSimulation .media-left {
    padding-right: 15px;
}

.chatSimulation .media-right {
    padding-left: 15px;
}

.chatSimulation .media-body {
  overflow: visible;
  text-align:left;
}

.chatSimulation .media-body span {
  border-radius: 25px;
  display:inline-block;
  max-width: /*calc(100% - 60px)*/ 610px;
  padding: 9px 23px;
  position:relative;
  vertical-align:middle;
}
.chatSimulation .short .media-body span {
  max-width: 500px;
}

  @media screen and (max-width: 767px) {
    .chatSimulation .media-body span {
      padding: 9px 15px;
    }
  }

.chatSimulation .answer .media-body span {
  float: right;
}

.chatSimulation .media-body span:after {
    content: "";
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}

.chatSimulation .question .media-body span:after {
    border-width: 8px 10px 8px 0;
    bottom: 14px;
    left: -5px;
}

.chatSimulation .answer .media-body span:after {
    border-width: 8px 0 10px 8px;
    bottom: 14px;
    right: -5px;
}

.chatSimulation .answer .media-body span i {
  font-style:normal;
  text-decoration:underline;
}

.well {
  background: #d7cdc3 url(../img/well_travelhomie.jpg);
  border-radius: 25px;
  -webkit-box-shadow: inset 0 2px 7px rgba(0,0,0,0.2);
  box-shadow: inset 0 2px 7px rgba(0,0,0,0.2);
  margin-bottom:0px;
  overflow:hidden;
  padding-top: 40px;
  position:relative;
}

.well.has-wellFooter {
  padding-bottom: 100px;
}
  @media screen and (max-width: 767px) {
    .well.has-wellFooter {
      padding-bottom: 150px;
    }
  }

.wellFooter {
  background: rgba(0,0,0,.075);
  bottom:0;
  left:0;
  padding: 10px 20px;
  position:absolute;
  width:100%;
}

.wellFooter img {
  max-height:45px;
}

.wellFooter span {
  display: inline-block;
}

.wellFooter .socialproof {
  display: inline-block;
  margin: 0 30px 0 0;
}
  @media screen and (max-width: 991px) {
    .wellFooter .socialproof {
      margin: 0 0 10px -15px;
    }
  }

.wellFooter .socialproof li {
  margin-right: -15px;
  padding:0;
}

.tutorialStep img.img-responsive {
  margin-bottom: 10px;
}

.handwritten {
  display:block;
  margin:auto;
  max-width:100%;
}

/* Slider */

.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

/* Custom */

#mainLogo {
  left: 15px;
  margin:auto;
  position: absolute;
  right:15px;
  top: 30px;
  z-index:2;
}
  @media screen and (max-width: 767px) {
    #mainLogo {
      left: 15px;
      margin: auto;
      max-width: 160px;
      right:15px;
      top:20px;
    }
  }

#homeHeader {
  background-position:center;
  background-repeat:no-repeat;
  background-size: cover;
}

#homeSlider {
  position: relative;
}
#homeSlider .item:before {
  background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(0,0,0,0.65) 33%, rgba(0,0,0,0.65) 67%, rgba(0,0,0,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.65) 33%,rgba(0,0,0,0.65) 67%,rgba(0,0,0,1) 100%);
  background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0.65) 33%,rgba(0,0,0,0.65) 67%,rgba(0,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
  content:'';
  height:100%;
  left:0;
  opacity: 0;
  position:absolute;
  top:0;
  width:100%;
  z-index:1;
}

#homeSlider .item {
  background-position:center;
  background-repeat:no-repeat;
  background-size: cover;
  padding: 180px 0;
}

  @media screen and (max-width: 767px) {
    #homeSlider .item {
      padding: 150px 0 160px;
    }
  }

#homeSlider h1 {
  left:0;
  padding: 0 15px;
  position: absolute;
  top: 80px;
  width:100%;
  z-index:2;
}
  @media screen and (max-width: 767px) {
    #homeSlider h1 {
      top: 50px;
    }
  }

#homeSlider .chatSimulation {
  position:relative;
  z-index:2;
}

#homeSlider .chatSimulation li {
  opacity: 0;
}


@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

#homeSlider .active .chatSimulation li {

 opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:.5s;
  -moz-animation-duration:.5s;
  animation-duration:.5s;

  
}

#homeSlider .chatSimulation li:first-child {
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  animation-delay: .1s;
}
#homeSlider .chatSimulation li:last-child {
  -webkit-animation-delay: .4s;
  -moz-animation-delay: .4s;
  animation-delay: .4s;
}



#homeSlider .cta-container {
  bottom: 40px;
  position: absolute;
  width:100%;
  z-index:2;
}

#headerFacts {
  -webkit-box-shadow: 0 40px 60px 0 rgba(0,0,0,.1);
  box-shadow: 0 40px 60px 0 rgba(0,0,0,.1);
  margin-bottom: 20px;
  padding:0px
}

#headerFacts .inner-container {
  margin:auto;
  max-width: 440px;
  padding:40px 0 50px;
}

  @media screen and (max-width: 991px) {
    #headerFacts .inner-container {
      padding:30px 0 40px;
    }
  }

  @media screen and (max-width: 767px) {
    #headerFacts .inner-container {
      padding:20px 0 30px;
    }
  }

#headerFacts p {
  margin-bottom: 0;
}

.has-divider {
  position: relative
}

@media screen and (min-width: 768px) {
  .has-divider:before {
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #e7e1da 100%);
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e7e1da 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#e7e1da 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7e1da',GradientType=0 );
    content:'';
    height:100%;
    position:absolute;
    right:-1px;
    top:0;
    width:2px;
  }
}
@media screen and (max-width: 991px) {
  .has-divider.last:before {
    background: #e7e1da;
    bottom:0;
    content:'';
    height:2px;
    position:absolute;
    right:0;
    width:100%;
  }
}
@media screen and (max-width: 767px) {
  .has-divider:before {
    background: #e7e1da;
    bottom:-1px;
    content:'';
    height:2px;
    position:absolute;
    right:0;
    width:100%;
  }
  .has-divider.last:before {
    background: #e7e1da;
    content:'';
    height:2px;
    position:absolute;
    right:0;
    top:-1px;
    width:100%;
  }
}

@media screen and (max-width: 1199px) {
  #topLogos {
    padding-top:15px;
  }
}
@media screen and (max-width: 991px) {
  #topLogos {
    padding-top:5px;
  }
}

#textHeader {
  margin-bottom: 60px;
  padding: 80px 0;
}

#textHeader h1 {
  margin:0;
}

  @media screen and (max-width: 767px) {
    #textHeader {
      margin-bottom: 30px;
      padding: 40px 0;
    }
  }

#textArticle {
  margin-bottom: 30px;
}

#hw_01 {
  height:60px;
  margin: 10px auto 0;
}
  @media screen and (min-width: 768px) {
    #hw_01 {
      transform: translateX(100px)
    }
  }

#aboutTravelhomie {
  overflow: hidden;
}

#aboutTravelhomie .content {
  padding-bottom: 50px;
  padding-top: 70px;
  position:relative
}

@media screen and (max-width: 767px) {
  #aboutTravelhomie .content {
    padding-bottom: 0px;
    padding-top: 50px;
  }
  #aboutTravelhomie .content + .content {
    margin-top: -40px
  }
}

#hw_02 {
  margin: 20px 0 0;
}
  @media screen and (min-width: 768px) {
    #hw_02 {
      transform: translateX(-20px)
    }
  }

#hw_03 {
  margin: 0 auto 20px;
}
  @media screen and (min-width: 768px) {
    #hw_03 {
      transform: translateX(100px) translateY(-20px)
    }
  }
  
#hw_04 {
  margin: 10px auto 0;
}
  @media screen and (min-width: 768px) {
    #hw_04 {
      transform: translateX(80px)
    }
  }

#addNow {
  position:relative;
  z-index: 2;
}

#channelTabs {
  border: 0 none;
  display:table;
  margin: 0 auto 60px;
}

#channelTabs a {
  border: 0 none;
  border-radius:100px;
  padding: 10px 20px;
  text-decoration:none;
  
}

#bigNumber {
  font-size:85px;
  font-weight: 900;
  text-shadow: 0 1px 0 #fff;
}

#bigMail {
  display:block;
  font-size:65px;
  font-weight: 900;
  margin-bottom:10px;
  text-shadow: 0 1px 0 #fff;
}

#bigMail a {
  text-decoration:none;
}

  @media screen and (max-width: 767px) {
    
    #channelTabs {
      font-size:16px;
      width:100%;
    }
    
    #channelTabs a {
      padding: 7px 13px;
    }
    
    #channelTabs li {
      margin-bottom:5px;
    }
    
    #channelTabs .active .hidden-xs {
      display:inline !important;
    }
    
    #bigNumber {
      font-size:30px;
    }
    
    #bigMail {
    	font-size: 26px;
    }
  }

#mainFooter {
  padding: 80px 0 30px;
}

#hw_05 {
  margin: 10px auto 80px;
}
  @media screen and (min-width: 768px) {
    #hw_05 {
      transform: translateX(80px)
    }
  }


#hw_06 {
  margin: 0 auto 30px;
}
  @media screen and (min-width: 768px) {
    #hw_06 {
      transform: translateX(50px) translateY(10px)
    }
  }
  
#footerNav {
  margin: 40px 0 30px;
}

  @media screen and (max-width: 767px) {
    #footerNav li {
      display: block;
      margin-bottom: 8px;
    }
  }
  
@media screen and (max-width: 767px) { 
  .zEWidget-launcher {
    display: none !important;
  }
}