.package-sticky-bar {
  //display: none;
  opacity: 0;
  position: fixed;
  right: 0;
  left: 0;
  bottom: -50px;
  z-index: 9999;
  height: 50px;
  @media (min-width: $screen-md-min) {
    background-color: rgba(255, 255, 255, 0.9);
    bottom: inherit;
    top: -50px;
    height: 50px;
    border-bottom: 1px solid $brand-grey-medium;
  }
  .container-limited {
    position: relative;
    padding-left: 0;
    padding-right: 0;
  }
  .nav {
    display: none;
    @media (min-width: $screen-md-min) {
      display: block;
    }
    font-size: $font-size-base;
    margin-top: 9px;
    text-transform: uppercase;
    > li {
      > a {
        color: $brand-copy-light;
        font-weight: $roboto-regular;
        padding: 10px 15px;
        &:focus,
        &:hover {
          color: $brand-grey-dark;
          font-weight: $roboto-bold;
          background-color: transparent;
          border: none;
          border-bottom: solid 2px $brand-primary;
        }
      }
      &.active {
        > a,
        > a:focus,
        > a:hover {
          color: $brand-grey-dark;
          font-weight: $roboto-bold;
          background-color: transparent;
          border: none;
          border-bottom: solid 2px $brand-primary;
        }
      }
    }
  }
  .calltoaction {
    @media (min-width: $screen-sm-min) {

    }
    @media (min-width: $screen-md-min) {
      background-color: rgba($brand-grey-light, 0.9);
      border: solid 1px $brand-grey-medium;
      width: 270px;
      height: 115px;
      position: absolute;
      top: 0;
      right: 15px;
      padding: 15px;
    }
    /*@media (min-width: $screen-sm-min) and (max-width: $screen-md-min) {
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }*/
    .package-price-container {
      display: none;
      /*@media (min-width: $screen-sm-min) and (max-width: $screen-md-min) {
        flex: 0 1 auto;
        line-height: 40px;
        margin-bottom: 0;
      }*/
      @media (min-width: $screen-md-min) {
        display: block;
        margin-top:3px;
        width: 100%;
        margin-bottom: 15px;
        text-align: right;
        float: left;
      }
      .from-price {
        font-size: 10px;
        @media (min-width: $grid-float-breakpoint) {
          font-size: 12px;
        }
      }
      .cont-price {
        .price {
          font-size: 30px;
          line-height: 24px;
          color: $brand-grey-dark;
          font-weight: $roboto-bold;
          &.mzn, &.clp, &.twd, &.cny, &.krw, &.inr, &.sar, &.rub, &.qar, &.afn, &.zar, &.xof, &.hnl, &.huf, &.aoa, &.xaf, &.mad, &.gmd, &.isk, &.irr  {
            font-size: 18px;
          }
          .symbol {
            font-size: 0.66em;
            color: $brand-grey-dark;
            line-height: 24px;
            font-weight: $roboto-bold;
          }
        }
      }
      .icon-anyfill-graph-info-circle,
      .icon-anyfill-graph-info-circle * {
        width: 16px;
        height: 16px;
        fill: $brand-copy-light;
        cursor: pointer;
        margin-left: 10px;
      }
    }
    .button-container {
      text-align: center;
      @media (min-width: $screen-sm-min) {
        text-align: right;
        margin-right: 15px;
      }
      @media (min-width: $screen-md-min) {
        text-align: center;
        margin-right: 0;
      }
      @media (min-width: $screen-sm-min) and (max-width: $screen-md-min) {
        flex: 0 1 auto;
        margin-left: 30px;
      }
      .button-reserve {
        @media (min-width: $screen-sm-min) and (max-width: $screen-md-min) {
          &.botonsolitario {

          }
        }
        @media (min-width: $screen-md-min) {
          display: block;
          width: 100%;
        }
      }
      .button-help {
        @media (min-width: $screen-md-min) {
          display: none !important;
        }
      }
    }
  }
}

/*  Animación para mostrar/ocultar la barra*/
.package-sticky-bar {
  &.fadeInDown {
    display: block;
    animation:mymove 0.5s ease-out forwards;
  }
  &.fadeOutUp {
    animation:mymove2 0.5s ease-out backwards;
  }
  @keyframes mymove
  {
    from {bottom:-120px; opacity: 0;}
    to {bottom:0; opacity: 1}
  }
  @keyframes mymove2
  {
    from {bottom:0; opacity: 1; display: block;}
    to {bottom:-120px; opacity: 0; display: none;}
  }
  @media (min-width: $screen-md-min) {
    &.fadeInDown {
      display: block;
      animation:mymove 0.5s ease-out forwards;
    }
    &.fadeOutUp {
      animation:mymove2 0.5s ease-out backwards;
    }
    @keyframes mymove
    {
      from {top:-120px; opacity: 0;}
      to {top:0; opacity: 1}
    }
    @keyframes mymove2
    {
      from {top:0; opacity: 1}
      to {top:-120px; opacity: 0;}
    }
  }
}




/* Ocultamos el botón para subir en tablet y móvil */
@media (max-width: $screen-md-min) {
  #btnArriba {
    display: none;
  }
}


/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) {

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) {

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) {

}