@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:400,700&Lato:400,700display=swap");
@keyframes pulsea {
  0%, 80%, 100% {
    text-shadow: 0pt 0px 0px rgba(255, 255, 255, 0), 10pt 0px 0px rgba(255, 255, 255, 0), 20pt 0px 0px rgba(255, 255, 255, 0); }
  10% {
    text-shadow: 0pt 0px 0px rgba(255, 255, 255, 0.5), 10pt 0px 0px rgba(255, 255, 255, 0), 20pt 0px 0px rgba(255, 255, 255, 0); }
  20% {
    text-shadow: 0pt 0px 0px white, 10pt 0px 0px rgba(255, 255, 255, 0), 20pt 0px 0px rgba(255, 255, 255, 0); }
  30% {
    text-shadow: 0pt 0px 0px rgba(255, 255, 255, 0.5), 10pt 0px 0px rgba(255, 255, 255, 0.5), 20pt 0px 0px rgba(255, 255, 255, 0); }
  40% {
    text-shadow: 0pt 0px 0px rgba(255, 255, 255, 0), 10pt 0px 0px white, 20pt 0px 0px rgba(255, 255, 255, 0); }
  50% {
    text-shadow: 0pt 0px 0px rgba(255, 255, 255, 0), 10pt 0px 0px rgba(255, 255, 255, 0.5), 20pt 0px 0px rgba(255, 255, 255, 0.5); }
  60% {
    text-shadow: 0pt 0px 0px rgba(255, 255, 255, 0), 10pt 0px 0px rgba(255, 255, 255, 0), 20pt 0px 0px white; }
  70% {
    text-shadow: 0pt 0px 0px rgba(255, 255, 255, 0), 10pt 0px 0px rgba(255, 255, 255, 0), 20pt 0px 0px rgba(255, 255, 255, 0.5); } }
@keyframes pulseb {
  0%, 80%, 100% {
    text-shadow: 0pt 0px 0px rgba(255, 255, 255, 0), 10pt 0px 0px rgba(255, 255, 255, 0), 20pt 0px 0px rgba(255, 255, 255, 0); }
  10% {
    text-shadow: 0pt 0px 0px rgba(255, 255, 255, 0), 10pt 0px 0px rgba(255, 255, 255, 0), 20pt 0px 0px rgba(255, 255, 255, 0.5); }
  20% {
    text-shadow: 0pt 0px 0px rgba(255, 255, 255, 0), 10pt 0px 0px rgba(255, 255, 255, 0), 20pt 0px 0px white; }
  30% {
    text-shadow: 0pt 0px 0px rgba(255, 255, 255, 0), 10pt 0px 0px rgba(255, 255, 255, 0.5), 20pt 0px 0px rgba(255, 255, 255, 0.5); }
  40% {
    text-shadow: 0pt 0px 0px rgba(255, 255, 255, 0), 10pt 0px 0px white, 20pt 0px 0px rgba(255, 255, 255, 0); }
  50% {
    text-shadow: 0pt 0px 0px rgba(255, 255, 255, 0.5), 10pt 0px 0px rgba(255, 255, 255, 0.5), 20pt 0px 0px rgba(255, 255, 255, 0); }
  60% {
    text-shadow: 0pt 0px 0px white, 10pt 0px 0px rgba(255, 255, 255, 0), 20pt 0px 0px rgba(255, 255, 255, 0); }
  70% {
    text-shadow: 0pt 0px 0px rgba(255, 255, 255, 0.5), 10pt 0px 0px rgba(255, 255, 255, 0), 20pt 0px 0px rgba(255, 255, 255, 0); } }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0); }
  40% {
    transform: translateY(-10px); }
  60% {
    transform: translateY(-5px); } }
@keyframes bounceRight {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(0); }
  40% {
    transform: translateX(-10px); }
  60% {
    transform: translateX(-5px); } }
@keyframes bounceLeft {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(0); }
  40% {
    transform: translateX(10px); }
  60% {
    transform: translateX(5px); } }
body {
  font-family: 'Roboto', sans-serif; }

h1, h2, h3, h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  color: #FFF; }

section {
  height: 100vh;
  overflow: hidden;
  position: relative; }

/*
 * Hero
 */
.hero-overlay {
  background: #000;
  display: flex;
  align-items: center; }
  .hero-overlay span {
    font-size: 8vw;
    color: #FFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold; }
    @media (min-width: 1200px) {
      .hero-overlay span {
        font-size: 120px; } }

.hero {
  position: relative;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 100%), url("../img/colombia-window-mobile.jpg") no-repeat left center;
  background-size: cover;
  display: flex;
  align-items: center; }
  @media (min-width: 992px) {
    .hero {
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 100%), url("../img/colombia-window.jpg") no-repeat center center;
      background-size: cover; } }
  .hero h1 {
    text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
    font-size: 15vw;
    margin: 0; }
    @media (min-width: 1200px) {
      .hero h1 {
        font-size: 150px; } }
  .hero span {
    font-family: 'Montserrat', sans-serif;
    text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
    font-size: 40px;
    color: #FFF; }
    @media (min-width: 1200px) {
      .hero span {
        font-size: 60px; } }
  .hero .down-arrow {
    position: absolute;
    bottom: 30px;
    display: block;
    width: 100%;
    height: 100px;
    background: url("../img/img-icon-down-arrows.svg") no-repeat center center;
    background-size: 30px 100px;
    animation: bounce 2s infinite; }

/*
 * Buttons
 */
.custom-btn {
  text-decoration: none;
  padding: 15px;
  border: 3px solid #FFF;
  font-size: 30px;
  background: none;
  color: #FFF;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  transition: color 0.25s ease-in-out, border 0.25s ease-in-out; }
  .custom-btn:hover, .custom-btn:focus, .custom-btn:visited, .custom-btn:active {
    box-shadow: none;
    outline: none;
    text-decoration: none; }

.custom-btn--primary:hover {
  color: #F5F749;
  border: 3px solid #F5F749;
  transition: color 0.25s ease-in-out, border 0.25s ease-in-out; }

.custom-btn--secondary:hover {
  color: #F5F749;
  border: 3px solid #F5F749;
  transition: color 0.25s ease-in-out, border 0.25s ease-in-out; }

.custom-btn--tertiary {
  border: 3px solid #F24236;
  color: #F24236; }
  .custom-btn--tertiary:hover {
    opacity: 0.5;
    transition: opacity 0.25s ease-in-out, border 0.25s ease-in-out; }

.custom-btn--med {
  font-size: 20px;
  padding: 10px 15px; }

.fixed-itinerary {
  position: fixed;
  top: 20px;
  right: 15px;
  z-index: 300; }
  @media (min-width: 768px) {
    .fixed-itinerary {
      right: 100px; } }
  @media (min-width: 1200px) {
    .fixed-itinerary {
      right: 10%; } }

/*
  * Location Blocks
 */
.locations-slider .slick-arrow {
  display: none !important;
  position: absolute;
  top: 50%;
  z-index: 100;
  text-indent: -9999px;
  border: none;
  width: 60px;
  height: 60px; }
  @media (min-width: 576px) {
    .locations-slider .slick-arrow {
      display: inline-block !important; } }
  .locations-slider .slick-arrow:active, .locations-slider .slick-arrow:visited, .locations-slider .slick-arrow:hover, .locations-slider .slick-arrow:focus {
    outline: none;
    box-shadow: none; }
  .locations-slider .slick-arrow.slick-next {
    background: transparent url("../img/img-icon-right-arrow.svg") no-repeat center center;
    background-size: contain;
    right: 20px;
    animation: bounceRight 2s infinite; }
  .locations-slider .slick-arrow.slick-prev {
    background: transparent url("../img/img-icon-left-arrow.svg") no-repeat center center;
    background-size: contain;
    left: 20px;
    animation: bounceLeft 2s infinite; }

.location-block {
  height: 100vh;
  display: flex;
  align-items: center;
  position: relative; }
  .location-block.slick-slide {
    display: flex; }
  .location-block .next-section-arrow {
    position: absolute;
    left: calc(50% - 50px);
    bottom: 30px;
    display: block;
    width: 100px;
    height: 100px;
    background: url("../img/img-icon-down-arrows.svg") no-repeat center center;
    background-size: 30px 100px;
    animation: bounce 2s infinite; }
    .location-block .next-section-arrow:hover, .location-block .next-section-arrow:focus, .location-block .next-section-arrow:visited, .location-block .next-section-arrow:active {
      box-shadow: none;
      outline: none; }

.swipe-indicators {
  margin: 25px 0;
  position: relative;
  right: 30px; }
  .swipe-indicators span.hand-icon {
    opacity: 0.8;
    position: relative;
    top: 5px;
    left: 2px;
    background: url("../img/icon-hand.png") no-repeat center center;
    background-size: contain;
    width: 25px;
    margin-left: 40px;
    height: 25px; }
  .swipe-indicators .indicate-swipe::after {
    margin-left: 20px;
    animation: pulsea 2s linear infinite;
    font-size: 20pt;
    color: transparent;
    /*Using only shadows makes the animation easier*/
    font-family: FontAwesome;
    content: "\f105";
    text-shadow: 0pt 0px 0px white, 10pt 0px 0px white, 20pt 0px 0px white; }
  .swipe-indicators .indicate-swipe--left:after {
    font-family: FontAwesome;
    content: "\f104";
    animation: pulseb 2s linear infinite;
    margin-left: 20px; }

.location-block__subtitle {
  text-transform: uppercase;
  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
  color: #FFF;
  font-size: 5vw; }
  @media (min-width: 768px) {
    .location-block__subtitle {
      font-size: 40px; } }

.location-block__title {
  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
  color: #FFF;
  font-size: 15vw; }
  @media (min-width: 1200px) {
    .location-block__title {
      font-size: 150px; } }

.location-block__dates {
  color: #FFF;
  font-size: 24px;
  font-family: 'Lato', sans-serif; }

.location-block--activities .location-block__title {
  font-size: 8vw; }
  @media (min-width: 1200px) {
    .location-block--activities .location-block__title {
      font-size: 90px; } }

.location-block--medellin {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/medellin-view.jpg") no-repeat center center;
  background-size: cover; }

.location-block--accommodation-medellin {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/medellin-wall.jpg") no-repeat center center;
  background-size: cover; }

.location-block--activities-medellin {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/medellin-church.jpg") no-repeat center center;
  background-size: cover; }

.location-block--guatape {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/guatape.jpg") no-repeat center center;
  background-size: cover; }

.location-block--accommodation-guatape {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/guatape-house.jpg") no-repeat center center;
  background-size: cover; }
  .location-block--accommodation-guatape .location-block__title {
    font-size: 8vw; }
    @media (min-width: 1200px) {
      .location-block--accommodation-guatape .location-block__title {
        font-size: 90px; } }

.location-block--activities-guatape {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/guatape-street.jpg") no-repeat center center;
  background-size: cover; }

.location-block--tayrona {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/parque-tayrona.jpg") no-repeat center center;
  background-size: cover; }

.location-block--accommodation-tayrona {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/finca.jpg") no-repeat center center;
  background-size: cover; }
  .location-block--accommodation-tayrona .location-block__title {
    font-size: 8vw; }
    @media (min-width: 1200px) {
      .location-block--accommodation-tayrona .location-block__title {
        font-size: 90px; } }

.location-block--activities-tayrona {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/tayrona-park.jpg") no-repeat center center;
  background-size: cover; }

.location-block--mompox {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/mompox.jpg") no-repeat center center;
  background-size: cover; }

.location-block--accommodation-mompox {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/casa1637.jpg") no-repeat center center;
  background-size: cover; }
  .location-block--accommodation-mompox .location-block__title {
    font-size: 8vw; }
    @media (min-width: 1200px) {
      .location-block--accommodation-mompox .location-block__title {
        font-size: 80px; } }

.location-block--activities-mompox {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/mompox-night.jpg") no-repeat center center;
  background-size: cover; }

.location-block--cartagena {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/cartagena-beaut.jpg") no-repeat center center;
  background-size: cover; }
  @media (max-width: 1200px) {
    .location-block--cartagena .location-block__title {
      font-size: 12vw; } }

.location-block--accommodation-cartagena {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/casa-quero.jpg") no-repeat center center;
  background-size: cover; }
  .location-block--accommodation-cartagena .location-block__title {
    font-size: 8vw; }
    @media (min-width: 1200px) {
      .location-block--accommodation-cartagena .location-block__title {
        font-size: 80px; } }

.location-block--activities-cartagena {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 100%), url("../img/cartagena-street.jpg") no-repeat center center;
  background-size: cover; }

footer {
  background: #3c4859 !important;
  padding: 40px 0;
  height: 100vh; }

.footer__poem {
  padding: 0;
  list-style-type: none; }
  .footer__poem li {
    color: #FFF;
    font-size: 28px;
    margin: 10px 0; }
    .footer__poem li:first-child {
      margin-top: 0; }

.fixed-back {
  position: fixed;
  top: 20px;
  left: 15px;
  z-index: 300; }
  @media (min-width: 768px) {
    .fixed-back {
      left: 100px; } }
  @media (min-width: 1200px) {
    .fixed-back {
      left: 10%; } }

.itinerary {
  min-height: 100vh;
  background-image: linear-gradient(45deg, rgba(46, 134, 171, 0.7) 0%, rgba(46, 134, 171, 0.9) 50%, rgba(246, 245, 174, 0.9) 50%, rgba(246, 245, 174, 0.7) 100%);
  background-size: cover;
  padding: 100px 0; }

.itinerary__sheet {
  background: #FFF;
  padding: 25px;
  z-index: 400; }

.itinerary__sheet--title {
  text-align: center;
  text-transform: uppercase;
  color: #2e86ab;
  font-weight: bold;
  font-size: 40px;
  text-shadow: 2px 4px 3px rgba(46, 134, 171, 0.3); }
  @media (min-width: 1200px) {
    .itinerary__sheet--title {
      font-size: 90px; } }

.itinerary__sheet__item {
  padding: 30px 0; }

.itinerary__sheet__item__title {
  color: #f24236;
  font-size: 20px; }

.card {
  border: none; }

.card-header {
  background: #2e86ab;
  padding: 0;
  border: 6px solid transparent;
  transition: all 0.25s ease-in-out; }
  .card-header:hover {
    background: #FFF;
    border: 6px solid #2e86ab; }

.card-header:hover .card--btn {
  color: #2e86ab; }

.card-header--accomodation {
  border: 6px solid #3c4859;
  background: none;
  transition: all 0.25s ease-in-out; }
  .card-header--accomodation:hover {
    border: 6px solid transparent;
    background: #3c4859; }

.card--btn {
  text-align: left;
  font-weight: bold;
  color: #FFF;
  width: 100%;
  display: flex;
  align-items: center;
  transition: all 0.25s ease-in-out;
  padding: 0.5rem; }
  @media (min-width: 576px) {
    .card--btn {
      padding: 1rem 2rem; } }
  .card--btn:hover, .card--btn:visited, .card--btn:active, .card--btn:focus {
    color: #FFF; }

.card-header--accomodation:hover .card--btn {
  color: #FFF; }

.card-header--accomodation .card--btn {
  color: #3c4859;
  box-shadow: none;
  outline: none; }

.btn--travel span {
  margin-left: auto; }

.flight-number {
  display: block;
  font-weight: bold;
  margin-bottom: 10px; }

.travel-steps {
  list-style-type: none;
  padding: 0 0 0 15px;
  border-left: 3px solid rgba(46, 134, 171, 0.7); }
  .travel-steps li {
    margin: 15px 0;
    position: relative; }
    .travel-steps li:first-child {
      margin-top: 0; }
    .travel-steps li:before {
      content: '';
      display: block;
      position: absolute;
      left: -22px;
      top: 4px;
      width: 20px;
      height: 15px;
      background: url("../img/icon-bullet.svg") no-repeat center left;
      background-size: 11px; }

.travel-step--text {
  font-weight: bold;
  padding: 20px 0; }

.accomodation-title {
  color: #2e86ab;
  margin-top: 15px;
  display: flex;
  padding-right: 2rem; }
  .accomodation-title span {
    margin-left: auto; }

.accomodation-detail,
.flight-link {
  font-weight: bold;
  color: #2e86ab;
  display: block;
  margin: 10px 0; }

/*# sourceMappingURL=styles.css.map */