/* See https://css-tricks.com/using-flexbox/ */
.page-header-banner {
  margin-bottom: 15px; }

#loyalty-club-details {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-wrap: wrap;
  font-size: 13px; }
  #loyalty-club-details .page-header-banner {
    -webkit-box-ordinal-group: 1;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 1;
    /* OLD - Firefox 19- */
    -ms-flex-order: 1;
    /* TWEENER - IE 10 */
    -webkit-order: 1;
    /* NEW - Chrome */
    order: 1;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */ }
  #loyalty-club-details .club-body {
    -webkit-box-ordinal-group: 2;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2;
    /* OLD - Firefox 19- */
    -ms-flex-order: 2;
    /* TWEENER - IE 10 */
    -webkit-order: 2;
    /* NEW - Chrome */
    order: 2;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-basis: 66.66%; }
  #loyalty-club-details .page-header-boxout {
    -webkit-box-ordinal-group: 3;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 3;
    /* OLD - Firefox 19- */
    -ms-flex-order: 3;
    /* TWEENER - IE 10 */
    -webkit-order: 3;
    /* NEW - Chrome */
    order: 3;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-basis: 33.33%; }
  #loyalty-club-details .club-footer {
    -webkit-box-ordinal-group: 4;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 4;
    /* OLD - Firefox 19- */
    -ms-flex-order: 4;
    /* TWEENER - IE 10 */
    -webkit-order: 4;
    /* NEW - Chrome */
    order: 4;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-basis: 66.66%; }
  #loyalty-club-details .club-payment-image {
    -webkit-box-ordinal-group: 5;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 5;
    /* OLD - Firefox 19- */
    -ms-flex-order: 5;
    /* TWEENER - IE 10 */
    -webkit-order: 5;
    /* NEW - Chrome */
    order: 5;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-basis: 33.33%; }
  #loyalty-club-details input {
    font-size: 13px; }
  #loyalty-club-details .page-header-boxout {
    width: 260px;
    float: right;
    margin-top: 0; }
  #loyalty-club-details .loyalty-login {
    height: 120px;
    z-index: 102;
    background: #1b1b1b;
    border: solid 1px #4a4a4a; }
    #loyalty-club-details .loyalty-login h3 {
      display: none; }
    #loyalty-club-details .loyalty-login .signin-errors {
      display: block;
      height: 30px;
      color: red; }
    #loyalty-club-details .loyalty-login ul a, #loyalty-club-details .loyalty-login ul input, #loyalty-club-details .loyalty-login .footer a, #loyalty-club-details .loyalty-login .footer input {
      color: #38a8fd; }
    #loyalty-club-details .loyalty-login .form-field {
      width: 100%;
      box-sizing: border-box; }
  #loyalty-club-details .club-payment-image {
    height: 250px;
    width: 260px; }

#loyalty-club-details .loyalty-login li {
  height: 30px;
  line-height: 30px;
  margin: 0; }

#loyalty-club-details .loyalty-login div input, #loyalty-club-details .loyalty-login div a {
  color: #eaeaea; }

#loyalty-club-details .loyalty-register {
  display: none; }

#loyalty-club-details .loyalty-register + span {
  display: none; }

#loyalty-club-details .club-body {
  margin-bottom: 15px; }

#loyalty-club-details .club-body h3,
#loyalty-club-details .club-body p {
  margin: 12px 0; }

#loyalty-club-details .club-body h3 {
  text-transform: none;
  margin-top: 0; }

#loyalty-club-details .club-body ul {
  line-height: 2em;
  list-style: disc;
  padding-left: 30px; }

#loyalty-club-details .club-footer {
  margin-top: 0; }

#loyalty-club-details .club-footer button {
  margin-left: 10px; }

/*The code for responsiveness can be found below. If you're including the responsiveness code in your custom CSS files, you may need to tweak the responsiveness code or the other CSS code in your files to ensure that responsiveness works correctly.*/
@media screen and (max-width: 840px) {
  #loyalty-club-details .page-header-banner {
    -webkit-box-ordinal-group: 1;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 1;
    /* OLD - Firefox 19- */
    -ms-flex-order: 1;
    /* TWEENER - IE 10 */
    -webkit-order: 1;
    /* NEW - Chrome */
    order: 1;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-basis: 100%; }
  #loyalty-club-details .club-body {
    -webkit-box-ordinal-group: 2;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 2;
    /* OLD - Firefox 19- */
    -ms-flex-order: 2;
    /* TWEENER - IE 10 */
    -webkit-order: 2;
    /* NEW - Chrome */
    order: 2;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-basis: 100%; }
  #loyalty-club-details .page-header-boxout {
    -webkit-box-ordinal-group: 3;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 3;
    /* OLD - Firefox 19- */
    -ms-flex-order: 3;
    /* TWEENER - IE 10 */
    -webkit-order: 3;
    /* NEW - Chrome */
    order: 3;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-basis: 100%; }
  #loyalty-club-details .club-footer {
    -webkit-box-ordinal-group: 4;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-ordinal-group: 4;
    /* OLD - Firefox 19- */
    -ms-flex-order: 4;
    /* TWEENER - IE 10 */
    -webkit-order: 4;
    /* NEW - Chrome */
    order: 4;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-basis: 100%;
    margin-top: 15px; }
  #loyalty-club-details .club-payment-image {
    display: none; } }

@media screen and (max-width: 767px) {
  .content {
    min-height: 0; }
  #loyalty-club-details {
    margin-top: 10px; }
    #loyalty-club-details .page-header-boxout {
      min-height: 0; }
    #loyalty-club-details .club-payment-image {
      display: none; }
    #loyalty-club-details .club-body {
      min-height: 0; }
      #loyalty-club-details .club-body p, #loyalty-club-details .club-body li {
        font-size: 16px; }
    #loyalty-club-details .club-footer {
      width: auto; }
    #loyalty-club-details .loyalty-login {
      display: block; } }

@media screen and (max-width: 480px) {
  #loyalty-club-details .club-footer .page-action {
    display: block;
    margin-bottom: 15px;
    text-align: center; } }