.pagamastarde-container {
  border: solid 1px $brand-grey-medium;
  margin-top: 25px;
  margin-bottom: 25px;
  .pagamastarde-header {
    position: relative;
    display: block;
    padding: 14px 30px 14px 105px;
    color: $brand-grey-dark;
    background-color: $brand-grey-medium;
    background-image: url("/headers/ilusion/"+ $assets-folder +"/dist/svg/icon-ownfill-logo-pagamastarde.svg");
    background-position: 15px 50%;
    background-size: 76px 45px;
    background-repeat: no-repeat;
    @media (min-width: $grid-float-breakpoint) {
      padding: 24px 25px 24px 105px;
      strong {
        display: block;
      }
    }
    small {
      display: block;
      width: 12px;
      height: 12px;
      overflow: hidden;
      background-color: transparent;
      background-image: url("/headers/ilusion/"+ $assets-folder +"/dist/svg/icon-ownfill-ui-chevron-right-46403c.svg");
      background-position: top right;
      background-size: 100%;
      background-repeat: no-repeat;
      position: absolute;
      top: 40px;
      right: 10px;
      text-indent: -200px;
      text-transform: uppercase;
      @media (min-width: $grid-float-breakpoint) {
        width: auto;
        height: 18px;
        text-indent: 0;
        right: 25px;
        padding-right: 25px;
        text-align: right;
        font-size: $font-size-base;
        font-weight: $roboto-regular;
        background-image: url("/headers/ilusion/"+ $assets-folder +"/dist/svg/icon-ownfill-ui-chevron-down-46403c.svg");
        background-size: 14px;
        background-position: right 50%;
      }
    }
    &:hover,
    &:focus{
      text-decoration: none;
    }
    @media (min-width: $grid-float-breakpoint) {
      &.open {
        small {
          background-image: url("/headers/ilusion/"+ $assets-folder +"/dist/svg/icon-ownfill-ui-chevron-up-46403c.svg");
        }
      }
    }
  }
  .pagamastarde-simulator {
    @media (max-width: $grid-float-breakpoint-max) {
      opacity: 0;
      background-color: #ffffff;
      width: 100vw;
      height: 1px;
      overflow: hidden;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      &.fadeInUp {
        display: block;
        animation:pagamastarde-simulatorFadeInUp 0.5s ease-out forwards;
      }
      &.fadeOutDown {
        animation:pagamastarde-simulatorFadeOutDown 0.5s ease-out forwards;
      }
      @keyframes pagamastarde-simulatorFadeInUp
      {
        from {bottom:-300px; opacity: 0; height: 1px;}
        to {bottom: 55px; opacity: 1; height: 100vh;}
      }
      @keyframes pagamastarde-simulatorFadeOutDown
      {
        from {bottom: 55px; opacity: 1; height: 100vh; display: block;}
        to {bottom: -300px; opacity: 0; height: 1px; display: none;}
      }
    }

    @media (min-width: $grid-float-breakpoint) {
      background-color: #ffffff;
      height: 0;
      overflow: hidden;
      &.openSimulator {
        min-height: 263px;
        transition: min-height 0.5s ease-out;
      }
      &.closeSimulator {
        min-height: 0;
        transition: min-height 0.5s ease-out;
      }
    }
  }
  .pagamastarde-simulator-header {
    height: 55px;
    background-color: #ffffff;
    font-size: $font-size-h4;
    font-weight: $roboto-light;
    padding-left: 45px;
    line-height: 55px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.1);
    button {
      position: absolute;
      left: 0;
      top: 0;
      margin: 15px;
      svg {
        width: 15px;
        height: 15px;
      }
    }
    @media (min-width: $grid-float-breakpoint) {
      display: none;
    }
  }
  .pagamastarde-simulator-inner {
    padding: 30px 10px;
    @media (min-width: $grid-float-breakpoint) {
      padding: 30px 25px;
    }
  }
}

/*



*/


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

}

/* 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) {

}