.trip { overflow-x: hidden; }

/* landscape */
#background {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  background-color: #f1f5f8;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-attachment: fixed;
  z-index:-1;

  transition:all 1s ease;
  opacity: 0.3;
  background-image: url(img/pexels-bg.jpeg);
}

/* abstract */
#background:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-attachment: fixed;
  z-index:-1;
  transition: all 1s ease;
  opacity: 0.3;
  background: url(img/bg.jpg);
}

/* balloon */
#background:after {
  content: '';
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:110vw;
  height:100vh;
  background-size: auto !important;
  background-repeat: no-repeat !important;
  background-position: 77% !important;
  background-attachment: fixed;
  z-index: -1;
  transform: rotate(5deg);
  transition:all 0.1s ease;
  opacity: 0.8;
  background: url(img/pexels-bg-after.png);

  -webkit-animation: action 3s infinite alternate;
  animation: action 3s infinite alternate;
}

@-webkit-keyframes action {
  0% { transform: translateY(0) rotate(5deg); }
  100% { transform: translateY(-10px)  rotate(4deg); }
}
@keyframes action {
  0% { transform: translateY(0) rotate(5deg); }
  100% { transform: translateY(-10px)  rotate(4deg); }
}

@media (max-width: 768px) {
  #background:after {
    background-position: right -90px center !important;
  }
}

@media (max-width: 576px) {
  #background:after {
    transition:all 1s ease;
    background-position: right -500px center !important;
  }
}

@media (max-width: 500px) {
  #background:after {
    display: none;
  }
}

#trip-left {
  transition: all 1s ease;
}

ul.timeline { list-style-type: none; position: relative; }
ul.timeline:before {
  content: ' ';
  background: #d4d9df;
  display: inline-block;
  position: absolute;
  left: 19px;
  width: 2px;
  height: 100%;
  /*margin-top: -1%;*/
  z-index: 400;
}
ul.timeline > li {
  margin: 20px 0;
  text-decoration: none;
  color: #3D4852;
  border-radius: 6px;
  padding: 5px 10px;
}
ul.timeline > li:before {
  content: ' ';
  background: white;
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border: 3px solid #6574CD;
  left: 10px;
  width: 20px;
  height: 20px;
  z-index: 400;
  margin-top:8px;
}
ul.timeline > li.trip-row { background:rgba(200,200,200,0.08); }
ul.timeline > li.trip-row:hover { cursor:pointer;background: rgba(0,0,0,0.1); }
ul.timeline > li > div.trip-row-a > span:nth-child(1) { cursor: pointer; }
ul.timeline > li > div.trip-row-a > span:nth-child(1) { display:grid;font-size:1.3em;font-weight:700;color:#22292F; }
.badge-blue { background-color:#2779BD;color:white; }
.badge-purple { background-color:#5661B3;color:white; }
.badge-green { background-color:#38A89D;color:white; }

ul.timeline > li > div.trip-new { font-size:1.3em;font-weight:700;color:#22292F;padding:5px;margin-top:-5px; }
ul.timeline > li > div.trip-new:hover { cursor:pointer;background:#5661B3; color:white;border-radius:5px;border:1px solid slategray; }