/** Shopify CDN: Minification failed

Line 26:0 Unexpected "$"

**/
@-ms-viewport {
  width: device-width;
}
html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}
body {
  margin: 0;
  padding: 0 !important;
}
footer {
  border-top: 0;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

$swell-theme-color: #a1a0a0;
$swell-link-bgcolor: #009af6;

/*Media Query Breakpoints Ends*/

$min: min-width;
$max: max-width;
$small: 480px;
$medium: 768px;
$large: 1024px;

/*Text colors*/

$colorWhite: #fff;
$colorBlack: #000;
$colorgray: #3b4b50;
$colorgreen: #57b32c;


/*theme font-family*/
$theme-font-northwell: 'Northwell';
$theme-font-bebas-neue: 'BebasNeueBold';
$theme-font-dinalternate: 'din_alternatebold';
/*Helper Classes Start*/
$siteWidth: 1075px;

@font-face {
  font-family: 'Northwell';
  src: url('swell-Northwell.woff2') format('woff2'),
  url('swell-Northwell.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'din_alternatebold';
  src: url('/cdn/shop/t/25/assets/din_alternate_bold.woff2') format('woff2'), url('/cdn/shop/t/25/assets/din_alternate_bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BebasNeueBold';
  src: url('BebasNeueBold.eot');
  src: url('BebasNeueBold.eot?#iefix') format('embedded-opentype'), url('/cdn/shop/t/25/assets/BebasNeueBold.woff2') format('woff2'), url('/cdn/shop/t/25/assets/BebasNeueBold.woff') format('woff'), url('BebasNeueBold.ttf') format('truetype'), url('BebasNeueBold.svg#BebasNeueBold') format('svg');
  font-weight: bold;
  font-style: normal;
}


@font-face {
  font-family: '';
  src: url('eBold.eot');
  src: url('BebasNeueBold.eot?#iefix') format('embedded-opentype'), url('/cdn/shop/t/25/assets/BebasNeueBold.woff2') format('woff2'), url('/cdn/shop/t/25/assets/BebasNeueBold.woff') format('woff'), url('BebasNeueBold.ttf') format('truetype'), url('BebasNeueBold.svg#BebasNeueBold') format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'swell-icon';
  src:  url('swell-icon.eot?t4rzxo');
  src:  url('swell-icon.eot?t4rzxo#iefix') format('embedded-opentype'),
    url('swell-icon.ttf?t4rzxo') format('truetype'),
    url('swell-icon.woff?t4rzxo') format('woff'),
    url('swell-icon.svg?t4rzxo#swell-icon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="swell-icon-"], [class*=" swell-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'swell-icon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.swell-icon-swell-previous-product:before {
  content: "\e905";
}
.swell-icon-swell-next-product:before {
  content: "\e906";
}
.swell-icon-copylink:before {
  content: "\e900";
  color: #fff;
}
.swell-icon-facebook-share:before {
  content: "\e901";
  color: #fff;
}
.swell-icon-fb-message:before {
  content: "\e902";
  color: #fff;
}
.swell-icon-sms:before {
  content: "\e903";
  color: #fff;
}
.swell-icon-tweet:before {
  content: "\e904";
  color: #fff;
}


/*Swell link list start*/
.swell-link-list {
  list-style: none;
  text-align: center;
  margin-left: 0;
  margin-bottom: 0;
  padding: 0;
  li {
    a {
      &.swell-link-register {
        border-bottom: 1px solid $swell-theme-color;
        color: $swell-theme-color;
      }
    }
  }
  .swell-link {
    display: inline-block;
    margin: 0 0.35em 1em;
    @media($min: $medium) {
     margin: 0 0.75 1em;
    }
    a {
      display: block;
      border: 2px solid $colorWhite;
      padding: 0.6em 0.5em;
      text-align: center;
      min-width: 12em;
      color: $colorWhite;
      text-decoration: none;
      border-radius: 35px;
      font-size: 18px;
      &.swell-link-redeem {
        background: $swell-link-bgcolor;
      }
      &.swell-link-history {
        background: #ffbe4b;
        border-color: #ffbe4b;
      }
    }
  }
}
.swell-link-login,
.swell-link-checkout {
  background: $swell-link-bgcolor;
  color: $colorWhite;
}

.swell-referral-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  img {
    max-width: 75px;
  }
}

.bomber-eye-rewards {
  p {
    font-size: 16px;
    color: $swell-theme-color;
  }
  img {
    width: 100%;
  }
  ul {
    padding: 0;
    margin: 0;
    li {
      list-style: none;
    }
  }
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
  @media ($min: $medium) {
    .desktop {
      display: block;
    }
    .mobile {
      display: none;
    }
  }
  .swell-tier-active {
    background: #ba212b;
    color: $colorWhite !important;
    border-bottom: 1px solid $colorWhite !important;
    .circle {
      background: $colorWhite !important;
    }
  }
  .swell-container {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    position: relative;
  }
  .swell-section-heading {
    margin-bottom: 50px;
    .swell-heading {
      color: $colorBlack;
      font-size: 24px;
      font-weight: bold;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: center;
      text-transform: uppercase;
      font-family: $theme-font-dinalternate;
      @media ($min: $small) {
        font-size: 38px;
        text-align: center;
        margin: 0 0 20px;
      }
    }
  }
  .sub-heading-holder {
    max-width: 760px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.44;
    letter-spacing: 0.32px;
    text-align: center;
    color: #2c2c2c;
  }
  .swell-account-banner{
    .swell-account-caption{
      padding: 50px 10px;
      .swell-rewards-title{
        font-family: $theme-font-dinalternate;
        font-size: 46px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1;
        letter-spacing: normal;
        text-align: center;
        text-transform: uppercase;
        color: $colorBlack;
      }
    }
  }
  .swell-banner {
    background-image: url(/cdn/shop/files/swell-new-banner.jpg?v=9544948116033553188);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: inherit;
    width: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    @media($max: $medium) {
      background-image: url(/cdn/shop/files/swell-new-banner-mobile.jpg?v=2067477855482453420);
      min-height: 550px;
    }
    .mobile-banner {
      display: block;
      @media($min: $medium) {
        display: none;
      }
    }
    .swell-caption {
      width: 100%;
      padding: 40px 10px 20px; 
      @media($min: $medium) {
        max-width: 660px;
        margin: 60px 0 0;
        padding: 0;
      }
      .caption-content {
        margin: 0 auto 10px;
        text-align: center;
        .swell-rewards-text {
          font-size: 60px;
          font-weight: normal;
          font-stretch: normal;
          font-style: normal;
          line-height: 0.1;
          letter-spacing: normal;
          text-align: center;
          color: $colorWhite;
          text-transform: lowercase;
          font-family: $theme-font-northwell;
          position: relative;
          z-index: 1;
          margin: 0;
          @media($min: $small) {
            font-size: 88px;
          }
          @media($min: $medium) {
            font-size: 95px;
          }
        }
        .swell-rewards-title {
          font-size: 131px!important;
          font-weight: bold;
          font-stretch: normal;
          font-style: normal;
          line-height: 1;
          letter-spacing: normal;
          text-align: center;
          color: #ba212b;
          font-family: $theme-font-bebas-neue;
          margin: 30px 0 0!important;          
          @media(max-width: 480px) {
            font-size: 68px!important;
          } 
          @media($min: $medium) {
            margin: -20px 0 0;          
            font-size: 68px;
          } 
        }
        .swell-rewards-detail {
          font-size: 13px;
          font-weight: bold;
          font-stretch: normal;
          font-style: normal;
          line-height: normal;
          letter-spacing: normal;
          text-align: center;
          font-family: $theme-font-dinalternate;
          max-width: 310px;
          margin: 0 auto 25px;
          color: $colorWhite;
          @media($min: $small) {
            font-size: 20px;
            max-width: 430px;
          }
          @media($min: $medium) {
            font-size: 15px;
            max-width: 435px;
            margin: 0 auto 20px;
          }
        }
      }
      .swell-link-list {
        display: flex;
        align-items: center;
        justify-content: center;
        @media($min: $medium) {
          max-width: 241px;
          margin: 0 auto;
        }
        .swell-link {
          display: block;
          margin-bottom: 20px;
          @media($min: $medium) {
            margin-bottom: 0;
            display: inline-block;
          }
          .swell-link-login {
            display: block;
            min-width: 145px;
            max-width: 145px;
            margin: 0 auto;
            padding: 12px 0;
            font-size: 14px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: normal;
            letter-spacing: normal;
            text-align: center;
            font-family: $theme-font-dinalternate;
            background: #fc0d1b;
            border: 1px solid #fc0d1b;
            border-radius: 2px;
            text-transform: capitalize;
            @media ($min: $small) {
              min-width: 225px;
              max-width: 225px;
            }
            @media ($min: $medium) {
              min-width: 130px;
              max-width: 130px;
              padding: 10px 0;
              font-size: 13px;
            }
            &.login {
              background: $colorBlack;
              border: 1px solid $colorBlack;
              &:hover {
                background: #fc0d1b;
                border: 1px solid #fc0d1b;
              }
            }
            &:hover {
              color: rgba(255, 255, 255, .85);
              background: rgba(0, 0, 0, .7);
              border: 1px solid rgba(0, 0, 0, .7);
            }
          }
        }
      }
    }
  }
  .joining-section-holder {
    padding: 0 10px;
    background: #ba212b;
    margin-bottom: 70px;
     .joining-section {
      max-width: 770px;
      margin: 0 auto 20px;
       .joining-section-login {
        padding: 60px 10px;
        @media($min: $medium) {
          padding: 60px 10px;
        }
        .swell-section-heading {
          text-align: center;
          border-bottom: 0;
          margin-bottom: 25px;
          h2 {
            font-size: 26px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: normal;
            letter-spacing: normal;
            text-align: center;
            font-family: $theme-font-dinalternate;
            color: $colorWhite;
            text-transform: uppercase;
            margin: 0;
             @media($min: $small) {
              font-size: 32px;
             }
             @media($min: $medium) {
              font-size: 34px;
             }

            .swell-point-balance,
            span {
              margin: 0 5px;
            }
          }
        }
        .swell-link-list {
          display: flex;
          align-items: center;
          justify-content: center;
          .swell-link {
            margin-bottom: 15px;
            margin: 0 0.7em 1em;
            a {
              font-size: 12px;
              font-weight: bold;
              font-stretch: normal;
              font-style: normal;
              line-height: normal;
              letter-spacing: normal;
              text-align: center;
              min-width: 135px;
              background: transparent;
              border: 1px solid $colorWhite;
              color: $colorWhite;
              padding: 15px 0;
              text-transform: uppercase;
              border-radius: 2px;
              &.swell-link-history {
                background: $colorBlack;
                border: 1px solid $colorBlack;
                color: $colorWhite;
                &:hover {
                  background: #fc0d1b;
                  border: 1px solid #fc0d1b;
                }
              }
              @media($min: $small) {
                min-width: 190px;
                font-size: 14px;
              }
              @media($min: $medium) {
                padding: 13px 0;
                min-width: 170px;
              }
              &:hover {
                background: #fc0d1b;
                border: 1px solid #fc0d1b;
              }
            }
          }
        }
      }
    } 
  }
  .swell-good-to-belong{
    margin: 65px 0;
    .swell-good-belongs-list{
      @media($min: $medium) {
        margin: 40px auto 0;
        max-width: 1100px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
      }
      li{
        max-width: 490px;
        margin: 0 auto 40px;
        padding: 0 20px;
        list-style: none;
        @media($min: $medium) {
          max-width: initial;
          padding: 0 10px;
          margin: 0 auto;
        }
        img{
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
          object-fit: cover;
          -o-object-position: center top;
          object-position: center top;
          vertical-align: -webkit-baseline-middle;
          margin-bottom: 20px;
        }
        .good-belongs-detail {
          font-size: 20px;
          font-weight: bold;
          font-stretch: normal;
          font-style: normal;
          line-height: normal;
          letter-spacing: normal;
          text-align: center;
          color: $colorBlack;
          font-family: $theme-font-dinalternate;
          @media($min: $small)
          {
            font-size: 22px;
          }
          @media($min: $medium)
          {
            font-size: 18px;
          }
        }
      }
    }
  }
  .swell-how-it-work {
    margin-bottom: 65px;
    @media($min: $medium) {
      display: flex;
    }
    .HIW-image-holder {
      flex: 1.4;
      img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center top;
        object-position: center top;
        vertical-align: -webkit-baseline-middle;
      }
    }
    .swell-HIW-detail-holder {
      flex: 2;
      background: #ba212b;
      padding: 45px 0 10px;      
      @media($min: $medium) {
        padding: 65px 0;
      }
      .swell-section-heading {
        margin-bottom: 40px;
        .swell-heading {
          color: $colorWhite;
        }
      }
      .swell-how-it-work-holder {
        .work-box-holder {
          padding: 0;
          list-style: none;
          @media ($min: $medium) {
            display: flex;
            text-align: center;
          }
          .work-box {
            margin-bottom: 40px;
            position: relative;
            @media ($min: $medium) {
              margin-bottom: 0;
              width: 33.3%;
            }
            .HIW-image-container {
              .HIW-circle-img {
                max-width: 150px;
                margin: 0 auto;
                display: block;
              }              
            }
            .list-box {
              position: absolute;
              top: 30%;
              right: 0;
              left: 0;
              h3 {
                font-size: 18px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: normal;
                letter-spacing: normal;
                text-align: center;
                color: $colorWhite;
                margin: 10px 0;
              }
              .list-content {
                max-width: 210px;
                margin: 0 auto;
                p {
                  font-size: 15px;
                  font-weight: normal;
                  font-style: normal;
                  font-stretch: normal;
                  line-height: normal;
                  letter-spacing: normal;
                  text-align: center;
                  color: $colorBlack;
                  @media($min: $medium) {
                    font-weight: 600;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .how-to-earn{
    margin: 70px 0 50px;
    &.logged-in{
      @media($min: $medium)
      {
        margin: 70px 0 0;
      }
    }
    @media($min: $medium)
    {
      margin: 0;
    }
    .loader{
      display: block;
      margin: 50px auto;
    }
    .campaign-holder{
      .swell-campaign-list {
        max-width: 760px;
        width: 100%;
        flex-wrap: wrap;
        padding: 0 10px;
        margin: 0px auto 80px;
        display: flex;
        justify-content: center;
        grid-template-areas:
          'signup video video video leave_r'
          'signup share_t share_f follow_y leave_r'
          'share_r share_r refer refer refer';
        grid-gap: 15px;
        grid-auto-rows: 140px;
        grid-auto-columns: 140px;
        &.logged-in {
          margin-bottom: 5px;
        }
        @media($min: $medium)
        {
          display: grid;
        }
        @media($min: 900px)
        {
          max-width: 900px;
          grid-auto-rows: 168px;
          grid-auto-columns: 168px;
        }
        @media($min: 1100px)
        {
          max-width: 1100px;
          grid-auto-rows: 208px;
          grid-auto-columns: 208px;
        }
        &.logged-in{
          .swell-campaign {
            cursor: pointer;
            .swell-campaign-content{
              .overlay{
                .banner-buttons{
                  display: none;
                }
              }
            }
          }
        }
        .swell-campaign {
          flex-basis: 100%;
          list-style: none;
          margin-right: 15px;  
          margin-bottom: 15px;
          @media($min: $medium) {
            margin-right: initial;
            margin-bottom: initial;
          }       
          &:nth-child(1) {
            flex-basis: 96%;
            margin-bottom: 15px;
            margin-right: 0;
            @media($min: $medium) {
              margin-right: initial;
              margin-bottom: initial;
            } 
            .swell-campaign-content {
              .swell-campaign-background {
                  background-image: url(/cdn/shop/files/swell-new-create-account-mobile.jpg?v=15654728674203614476);                
                @media($min: $medium) {
                  background-image: url(/cdn/shop/files/swell-new-create-account.jpg?v=12472957938782663046);
                }
              }
            }
          }
          &:nth-child(2) {
            .swell-campaign-content {
              .swell-campaign-background {
                background-image: url(/cdn/shop/files/swell-spent-mobile.jpg?v=17415698360320434867);
                @media($min: $medium) {
                  background-image: url(/cdn/shop/files/swell-spent.jpg?v=11296166095442087010);
                }
              }
            }
          }
          &:nth-child(3) {
            margin-right: 0;
            @media($min: $medium) {
              margin-right: initial;
            } 
            .swell-campaign-content {
              .swell-campaign-background {
                background-image: url(/cdn/shop/files/swell-read-blog.jpg?v=1848664606791536564);
              }
            }
          }
          &:nth-child(4) {
            .swell-campaign-content {
              .swell-campaign-background {
                background-image: url(/cdn/shop/files/swell-review.jpg?v=16716088303203197666);
              }
            }
          }
          &:nth-child(5) {
            margin-right: 0; 
            @media($min: $medium) {
              margin-right: initial;
            }    
            .swell-campaign-content {
              .swell-campaign-background {
                background-image: url(/cdn/shop/files/swell-follow-fb.jpg?v=9200880956321420589);
              }
            }
          }
          &:nth-child(6) {
            .swell-campaign-content {
              .swell-campaign-background {
                background-image: url(/cdn/shop/files/swell-follow-insta.jpg?v=6383652936105455070);
              }
            }
          }
          &:nth-child(7) {
            margin-right: 0;   
            @media($min: $medium) {
              margin-right: initial;
            }          
            .swell-campaign-content {
              .swell-campaign-background {
                background-image: url(/cdn/shop/files/swell-new-birthday-mobile.jpg?v=11625144918339136480);
                @media($min: $medium) {
                  background-image: url(/cdn/shop/files/swell-new-birthday.jpg?v=12582887070156471597);
                }
              }
            }
          }
          &.refer {
            flex-basis: 96%;
            margin-right: 0;
            @media($min: $medium) {
              margin-right: initial;
            }
            .swell-campaign-content {
              @media($min: $medium) {
                display: flex;
              }
              .swell-campaign-background {
                flex-basis: 58%;
                min-height: initial;
              }
              .campaign-data {
                background: #ba212b;
                flex-basis: 42%;
                position: relative;
                width: initial;
                padding: 40px 0;
                @media($min: $medium) {
                  padding: 0;
                }
                .swell-campaign-refer-friend {
                  font-size: 25px;
                  font-weight: bold;
                  font-stretch: normal;
                  font-style: normal;
                  line-height: 1.5;
                  letter-spacing: normal;
                  text-align: center;
                  color: $colorWhite;
                  font-family: $theme-font-dinalternate;
                  height: initial;
                  @media($min: $medium) {
                    font-size: 20px;
                  }
                  @media($min: $large) {
                    font-size: 25px;
                  }
                }
                .swell-campaign-detail {
                  font-size: 16px;
                  font-weight: bold;
                  font-stretch: normal;
                  font-style: normal;
                  line-height: normal;
                  letter-spacing: normal;
                  text-align: center;
                  color: #fefefe;
                  font-family: $theme-font-dinalternate;
                  margin-bottom: 25px;
                  height: initial; 
                  @media($min: $small) {
                    font-size: 20px;
                  }
                  @media($min: $medium) {
                    font-size: 14px;
                  }
                  @media($min: $large) {
                    font-size: 16px;
                  }                 
                }
                .start-refer-btn {
                  font-size: 13px;
                  font-weight: bold;
                  font-stretch: normal;
                  font-style: normal;
                  line-height: normal;
                  letter-spacing: normal;
                  text-align: center;
                  display: block;
                  background: $colorBlack;
                  border-radius: 2px;
                  padding: 18px 0;
                  border: 1px solid $colorBlack;                 
                  color: $colorWhite;
                  font-family: $theme-font-dinalternate;
                  text-transform: uppercase;
                  max-width: 180px;
                  margin: 0 auto;
                  width: 100%;
                  @media($min: $small) {
                    max-width: 260px;
                    font-size: 16px;                    
                  }
                  @media($min: $medium) {
                    max-width: 160px;
                    font-size: 12px;  
                    padding: 12px 0;                  
                  }
                  @media($min: $large) {
                    max-width: 180px;
                    font-size: 13px;
                  }
                  &:hover {
                    background: #fc0d1b;
                    border: 1px solid #fc0d1b;
                  }
                }
              }
            }
          }
          .swell-campaign-content{
            position: relative;
            @media($min: $medium) {
              height: 100%;
            }
            .swell-campaign-background{
              background-repeat: no-repeat;
              background-position: center;
              background-size: cover;
              height: 100%;
              width: 100%;
              min-height: 160px;
              @media($min: $small) {
                min-height: 330px;
              }
              @media($min: $medium) {
                min-height: initial;
              }
              img{
                height: 100%;
                -o-object-fit: cover;
                object-fit: cover;
                width: 100%;
              }
            }
            .campaign-data{
              position: absolute;
              top: 0;
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              div{
                width: 100%;
                height: 50%;
                span{
                  font-size: 14px;
                  font-weight: bold;
                  font-stretch: normal;
                  font-style: normal;
                  line-height: normal;
                  letter-spacing: 0.96px;
                  text-align: center;
                  font-family: $theme-font-bebas-neue;
                  color: $colorWhite;
                  padding: 10px 0;
                  @media($min: $small)
                  {
                    font-size: 22px;
                  }
                  @media($min: $medium)
                  {
                    font-size: 18px;
                  }
                }
                &.swell-campaign-type{
                  padding: 8px 10px;
                  @media($min: 1100px)
                  {
                    padding: 15px;
                  }
                }
                &.swell-campaign-value{
                  display: flex;
                  align-items: flex-end;
                  justify-content: flex-end;
                  span{
                    font-size: 24px;
                    font-weight: bold;
                    font-stretch: normal;
                    font-style: normal;
                    line-height: normal;
                    letter-spacing: normal;
                    text-align: center;
                    font-family: $theme-font-bebas-neue;
                    color: rgba(255, 255, 255, 0.7);
                    padding: 15px;
                    @media($min: $small) {
                      font-size: 32px;
                    }
                  }
                }
              }
            }
            .overlay{
              position: absolute;
              top: 0;
              width: 100%;
              height: 100%;
              opacity: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              background: #000000bf;
              -webkit-transition: all 300ms ease-in-out;
              -moz-transition: all 300ms ease-in-out;
              transition: all 300ms ease-in-out;
              &:hover{
                opacity: 1;
              }
              .banner-buttons{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin: 0;
                width: 100%;
                .swell-button{
                  color: $colorBlack;
                  font-size: 10px;
                  background-color: $colorWhite;
                  padding: 10px 0;
                  text-align: center;
                  width: 100%;
                  max-width: 110px;
                  padding: 4px 0;
                  &.signup{
                    margin-bottom: 5px;
                  }
                }
              }
            }
          }
          &:nth-child(1){
            grid-area: signup;
          }
          &:nth-child(2){
            grid-area: video;
          }
          &:nth-child(3){
            grid-area: leave_r;
          }
          &:nth-child(4){
            grid-area: share_t;
          }
          &:nth-child(5){
            grid-area: share_f;
          }
          &:nth-child(6){
            grid-area: follow_y;
          }
          &:nth-child(7){
            grid-area: share_r;
          }
          &:nth-child(8){
            grid-area: refer;
          }
        }
      }
    }
  }



  .vip-table-section {
    text-align: center;
    margin-bottom: 70px;
    padding: 0 15px;
    @media ($min: $medium) {
      margin-bottom: 80px;
    }
    .swell-section-heading {
      .swell-heading{
        color: $colorBlack;
      }
      .swell-detail {
        @media ($min: $medium) {
          br {
            display: none;
          }
        }
      }
    }
    .swell-tier-arrows {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 15px;
      @media ($min: $medium) {
        display: none;
      }
      .arrows-holder {
        width: 34%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .arrow-icon {
          font-size: 20px;
          cursor: pointer;
          margin: 0 10px;
          @media ($min: $small) {
            margin: 0 20px;
            font-size: 25px;
          }
        }
      }
    }
    .swell-tier-table {
      border-collapse: collapse;
      width: 100%;
      border: 0;
      th,
      td {
        font-size: 13px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: left;
        color: #666666;
        font-family: $theme-font-dinalternate;
        border: 0;
        border-bottom: 1px solid rgba(17, 17, 17, 0.3);
        border-right: 1px solid rgba(17, 17, 17, 0.3);
        width: 60%;
        padding: 18px 20px;
        vertical-align: middle;
        .circle {
          display: block;
          width: 7px;
          height: 7px;
          border-radius: 100%;
          margin: 0 auto;
          background-color: $colorBlack;
        }
        &:not(:first-child) {
          text-align: center;
          width: 30%;
          @media ($min: $medium) {
            width: 15%;
          }
        }
        &:nth-child(3),
        &:nth-child(4) {
          display: none;
        }
        @media ($min: $small) {
          font-size: 18px;
        }
        @media ($min: $medium) {
          width: 30%;
          font-size: 15px;
          padding: 16px 0;
          &:nth-child(3),
          &:nth-child(4) {
            display: table-cell;
          }
        }
      }
      thead {
        tr {
          &.swell-tier-status-row {
            th {
              border-right: 0;
              border-bottom: 0;
              padding: 0;
              opacity: 1;
              &.swell-tier-active{
                background: transparent; 
              }
              .next-tier,
              .current-tier {
                font-size: 12px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: 2;
                letter-spacing: normal;
                text-align: center;
                color: #ba212b;
                font-family: $theme-font-dinalternate;
                text-transform: uppercase;
                @media ($min: $small) {
                  font-size: 18px;
                }
              }
              &:not(:first-child) {
                text-align: center;
                width: 30%;
                @media ($min: $medium) {
                  width: 15%;
                }
              }
            }
          }
          &.swell-tier-values {
            th {
              padding: 8px 5px 20px;
              border-bottom: 0;
              font-size: 14px;
              font-weight: bold;
              font-stretch: normal;
              font-style: normal;
              line-height: normal;
              letter-spacing: normal;
              text-align: center;
              color: $colorBlack;
              font-family: $theme-font-dinalternate;
              border-bottom: 1px solid rgba(17, 17, 17, 0.3);             
            }
          }
          &.swell-tier-names {
            th {
              padding: 20px 0 0 0;
              border-bottom: 0;
              font-size: 22px;
              font-weight: bold;
              font-stretch: normal;
              font-style: normal;
              line-height: normal;
              letter-spacing: normal;
              text-align: center;
              color: $colorBlack;
              font-family: $theme-font-dinalternate;
              &:not(:first-child) {
                border-top: 1px solid rgba(17, 17, 17, 0.3);
                text-transform: uppercase;
              }
              &.swell-tier-active {
                border-top: 1px solid #ba212b !important;
              }
            }
            .swell-tier-active {
              border-bottom: 0 !important; 
            }
          }
        }
      }
      tbody {
        tr {
          &:last-child {
            th{
              border-bottom: none;
            }
            td {
              border-bottom: 0;
              &:not(:first-child) {
                border-bottom: 1px solid rgba(17, 17, 17, 0.3);             
                padding: 40px 30px;
              }
              &.swell-tier-active {
                border-bottom: 1px solid #ba212b !important;
              }
            }
          }
        }
      }
      &.tier_0 {
        thead,
        tbody {
          tr {
            th:nth-child(2),
            td:nth-child(2) {
              display: table-cell;
            }
            th:nth-child(3),
            th:nth-child(4),
            td:nth-child(3),
            td:nth-child(4) {
              display: none;
              @media ($min: $medium) {
                display: table-cell;
              }
            }
          }
        }
      }
      &.tier_1 {
        thead,
        tbody {
          tr {
            th:nth-child(3),
            td:nth-child(3) {
              display: table-cell;
            }
            th:nth-child(2),
            th:nth-child(4),
            td:nth-child(2),
            td:nth-child(4) {
              display: none;
              @media ($min: $medium) {
                display: table-cell;
              }
            }
          }
        }
      }
      &.tier_2 {
        thead,
        tbody {
          tr {
            th:nth-child(4),
            td:nth-child(4) {
              display: table-cell;
            }
            th:nth-child(2),
            th:nth-child(3),
            td:nth-child(2),
            td:nth-child(3) {
              display: none;
              @media ($min: $medium) {
                display: table-cell;
              }
            }
          }
        }
      }
    }
  }

  .swell-redeem-for-discount {
     margin-bottom: 75px;
     &.logged-in{
      @media($min: $medium){
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding-bottom: 80px;
      }
     }
     .swell-section-heading {
      margin-bottom: 40px;
       .swell-heading {
        margin: 0 0 10px;
        color: $colorBlack;
       }
       .sub-heading-holder {
        font-size: 13px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        font-family: $theme-font-dinalternate;
        letter-spacing: normal;
        color: #666;
        text-align: center;
        br {
          display: block;
          @media($min: $medium) {
            display: none;
          }
        }
        @media($min: $small) {
          font-size: 20px;
        }
        @media($min: $medium) {
          font-size: 15px;
        }
       }
     }
     .swell-redemption-option-list {
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
       max-width: 730px;
       margin: 0 auto;
       padding: 0 30px;
       @media($min: $medium) {
        padding: 0;
       }
       .swell-redemption-option {
         flex-basis: 45%;
         margin: 5px 5px;
         display: flex;
         align-items: center;
         justify-content: center;
         @media($min: $medium) {
           margin: 0 5px 5px;
           flex-basis: 18%;
         }
         &:nth-child(1),
         &:nth-child(2) {
          margin-bottom: 50px;
          @media($min: $medium) {
            margin-bottom: 0;
          }
         }
         .swell-redemption-option-content {
           width: 100%;
           padding: 10px 0;
           border: 1px solid rgba(17, 17, 17, 0.2);
           @media($min: $small) {
            padding: 22px 0;
           }
           .swell-redemption-option-cost {
              font-size: 30px;
              font-weight: bold;
              font-stretch: normal;
              font-style: normal;
              line-height: normal;
              letter-spacing: normal;
              text-align: center;
              color: $colorBlack;
              font-family: $theme-font-dinalternate;
              margin: 0 0 5px;
              @media($min: $small) {
                font-size: 34px;
              }
              @media($min: $medium) {
                font-size: 30px;
              }
           }
           .swell-redemption-option-value {
              font-size: 16px;
              font-weight: bold;
              font-stretch: normal;
              font-style: normal;
              line-height: normal;
              letter-spacing: normal;
              text-align: center;
              color: #666;
              text-transform: uppercase;
              font-family: $theme-font-dinalternate;  
              @media($min: $small) {
                font-size: 20px;
              }
              @media($min: $medium) {
                font-size: 16px;
              }            
           }
         }
       }
     }
   }
}
 .referral-section {
    background-color: #ba212b;
    .refer-mobile-image-holder {
      position: relative;
      .redeem-img {
        display: block;
        @media($min: $medium) {
          display: none;
        }
      }
      .refer-friend {
        font-size: 22px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: center;
        color: $colorWhite;
        font-family: $theme-font-dinalternate;
        position: absolute;
        top: 50%;
        left: -65px;
        transform: rotate(90deg);
        @media($min: $small) {
          left: -70px;
          font-size: 26px;
        }
        @media($min: $medium) {
          display: none;
        }
      }
    }
     .referral-section-holder {
        @media($min: $medium) {
          display: flex;
          background: #ba212b;
        }
       .swell-referral-holder {
        padding: 25px 10px 25px;
        background: #ba212b;
        @media($min: $medium) {
          flex-basis: 40%;
          padding: 50px 15px 80px;
          min-width: 410px;
        }
        @media($min: $large) {
          min-width: initial;
        }
         .swell-referral {
           max-width: 410px;
           margin: 0 auto;
           width: 100%;
         }
         .swell-referral-content-container {
           .swell-referral-content-sidebar {
            display: none;
           }
           .swell-referral-content-main {
             text-align: center;
             position: relative;
             display: flex;
             align-items: center;
             justify-content: center;
             width: 100%;
             .swell-referral-register {
               max-width: 530px;
               width: 100%;
             }
             .swell-referral-refer {
               max-width: 530px;
               width: 100%;
             }
             .swell-referral-heading {
              font-size: 40px;
              font-weight: bold;
              font-stretch: normal;
              font-style: normal;
              line-height: normal;
              letter-spacing: normal;
              text-align: center;    
              font-family: $theme-font-dinalternate;
              color: $colorWhite;
              text-transform: uppercase;       
              margin-bottom: 10px;
               @media ($min: $small) {
                 font-size: 48px;
               }
               @media ($min: $medium) {
                 font-size: 50px;
                 text-align: left;
               }
               @media($min: 1080px) {
                font-size: 53px;
               }
             }
             .swell-referral-details {
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              font-style: normal;
              line-height: normal;
              letter-spacing: normal;
              text-align: center;
              color: #fefefe;         
              max-width: 310px;
              width: 100%;
              margin: 0 auto 30px;
              padding-bottom: 35px;
              font-family: $theme-font-dinalternate;
              border-bottom: 1px solid rgba(255,255,255,0.2);
               @media ($min: $small) {
                 font-size: 16px;
                 max-width: 350px;
               }
               @media ($min: $medium) {
                 font-size: 15px;
                 text-align: left;                 
                 max-width: 410px;
               }
             }
             .refer-customer-error {
               color: #fff;
             }
             .swell-referral-form-wrapper {
               .swell-referral-form-list { 
                 @media($min: $medium) {
                  display: flex;
                 }
                 .swell-referral-form-list-field {}
                   .swell-referral-form-list-field {
                     flex: 1;
                     width: 100%;
                     &:first-child {
                       flex: 2;
                        margin-right: 0;
                        margin-bottom: 15px;
                       @media($min: $medium) {
                        margin-right: 5px;
                        margin-bottom: 0;
                       }
                     }
                   }
                 }
               .swell-referral-form-header-details {
                font-size: 16px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: normal;
                letter-spacing: normal;
                text-align: center;
                color: #fefefe;
                margin: 0 auto 15px;
                font-family: $theme-font-dinalternate;              
                 @media ($min: $medium) {
                   text-align: left;
                 }
               }
               .swell-referral-form-body {
                max-width: 380px;
                margin: 0 auto;
                padding: 0 15px;
                @media($min: $medium) {
                  max-width: 100%;
                  padding: 0;
                }
               }
               .swell-referral-form-list-field-input {
                font-size: 13px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: normal;
                letter-spacing: normal;
                text-align: left;
                font-family: $theme-font-dinalternate;
                border:1px solid $colorWhite;
                background-color: $colorWhite;
                padding: 5px 20px;
                color: rgba(0, 0, 0, 0.7);
                outline: 0;
                width: 100%;            
                box-shadow: none;
                height: 50px;
                border-radius: 0;
                 @media ($min: $medium) {
                   font-size: 13px;
                   height: 40px;
                 }
                 &::placeholder {
                   color: rgba(0, 0, 0, 0.3) !important;
                 }
               }
               .swell-referral-form-list-submit {
                font-size: 15.5px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: normal;
                letter-spacing: normal;
                text-align: center;
                font-family: $theme-font-dinalternate;
                color: rgba(255, 255, 255, 0.7);
                border: 1px solid $colorWhite;
                background-color: transparent;
                border-radius: 0;
                width: 100%;
                height: 50px;              
                outline: 0;
                margin: 0;
                 &:hover{
                  &:hover {
                    background: #fc0d1b;
                    border: 1px solid #fc0d1b;
                  }
                 }
                 @media ($min: $small) {
                   font-size: 20px;
                 }
                 @media($min: $medium) {
                   font-size: 15px;
                   height: 40px;
                 }
               }
             }
             .swell-referral-media-wrapper {
               margin-top: 15px;
               @media ($min: $small) {
                 margin-top: 25px;
               }
               .swell-referral-media-details {
                font-size: 16px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: normal;
                letter-spacing: normal;
                text-align: center;
                color: #fefefe;
                font-family: $theme-font-dinalternate;
                max-width: 225px;
                width: 100%;              
                margin: 0 auto 20px;
                 @media ($min: $medium) {
                   margin: 0 auto 15px;
                   font-size: 16px;
                   text-align: left;
                   max-width: 100%;
                 }
               }
               .swell-referral-media-list {
                 display: flex;
                 align-items: center;
                 justify-content: space-evenly;
                 width: 100%;
                 max-width: 385px;
                 margin: auto;
                 .swell-referral-medium {   
                 flex: 1;        
                   .swell-referral-medium-content {
                     cursor: pointer;
                     font-size: 13px;
                     color: #fefefe;
                     @media($min: $small) {
                      font-size: 15px;
                     }
                     @media ($min: $medium) {
                       display: flex;
                       align-items: center;
                       justify-content: flex-start;
                       font-weight: bold;
                       font-stretch: normal;
                       font-style: normal;
                       line-height: normal;
                       letter-spacing: normal;
                       text-align: left;
                       font-family: $theme-font-dinalternate;  
                       font-size: 14px;
                     }
                     .swell-referral-media-icon {
                       display: block;
                       font-size: 18px;
                       margin-bottom: 10px;
                       @media ($min: $medium) {
                         font-size: 13px;
                         display: inline-block;
                         margin-right: 5px;
                         margin-bottom: 0;
                       }
                     }
                   }
                   &.swell-share-referral-sms {
                     @media ($min: $medium) {
                       display: none;
                     }
                   }
                 }
               }
             }
             .swell-referral-thanks {
               display: flex;
               align-items: center;
               justify-content: center;
               flex-direction: column;
               padding: 0 15px;
               min-height: 445px;
               max-width: 500px;
               @media ($min: $small) {
                 min-height: 474px;
               }
               @media ($min: $medium) {
                 min-height: 308.5px;
                 padding: 0;
               }
               @media ($min: $large) {
                 min-height: 327.5px;
               }
               .swell-referral-back-link {
                 &:before,
                 &:after {
                   background: $colorWhite;
                 }
               }
               .swell-referral-heading {
                font-size: 30px;
                text-align: center;
               }
               .swell-referral-details{
                 font-size: 12px;
                 text-align: center;
                 border-bottom: 0;
                 @media ($min: $small) {
                   font-size: 18px;
                 }
                 @media ($min: $medium) {
                   font-size: 16px;
                 }
               }
             }
           }
         }
       }
       .referral-sidebar-content-outer-holder {
        flex-basis: 60%;
        @media($min: $medium) {
          background-image: url(/cdn/shop/files/swell-refer-desktop.jpg?v=6079440484811971703);
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          width: 100%; 
          position: relative;
          order: 2;            
        } 
        &.logged-in {
          background-image: url(/cdn/shop/files/swell-refer-loggedin.jpg?v=2112612824310590461);          
        }
        .refer-friend {
          font-size: 22px;
          font-weight: bold;
          font-stretch: normal;
          font-style: normal;
          line-height: normal;
          letter-spacing: normal;
          text-align: center;
          color: $colorWhite;
          font-family: $theme-font-dinalternate;
          position: absolute;
          transform: rotate(90deg);
          display: none;
          @media($min: $medium) {
            display: block;
            top: 50%;
            left: -80px;
          }
        }   
         .referral-sidebar-content {
           display: flex;
           justify-content: flex-start;
           height: 100%;
           .referral-sidebar-content-holder {
              margin: 0;
              width: 100%;
              padding: 40px 15px;
              background-color: #ba212b;
              @media($min: $medium) {
                background: transparent;
                max-width: 375px;
                padding: 10px 30px;
              }
              @media($min: 870px) {
                max-width: 448px;
              }
             .check-balance {
               margin-bottom: 8px;
               text-align: center;          
               @media ($min: $medium) {
                 text-align: left;          
               }
               .reward-balance {
                font-size: 16px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: normal;
                letter-spacing: 0.43px;
                text-align: center;
                color: $colorWhite;
                font-family: $theme-font-dinalternate;                        
                text-decoration: none;
                border-bottom: 1px solid $colorWhite;
                 @media($min:$small) {
                   font-size: 18px;
                 }
                 @media($min:$medium) {
                   text-align: left;
                 }
               }
             }
             .swell-referral-heading {
               text-align: center;
               .swell-heading {
                font-size: 26px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: normal;
                letter-spacing: 0.8px;
                text-align: center;
                text-transform: uppercase;
                font-family: $theme-font-dinalternate;
                margin: 0 auto 25px;                                        
                color: $colorWhite;
                 @media($min:$medium) {
                   text-align: left;
                   margin: 0 auto 15px;
                 }
               }
               .swell-detail {
                 font-size: 14px;
                 font-weight: normal;
                 line-height: 1.31;
                 letter-spacing: normal;
                 color: $colorBlack;
                 max-width: 330px;
                 width: 100%;                                          
                 margin: 0 auto;
               }
             }
             .table-classes {
               max-width: 450px;
               margin: 0 auto;
               width: 100%;
               margin-bottom: 25px;
               padding-bottom: 15px;
               border-bottom: 1px solid rgba(255, 255, 255, 0.5);
               @media($min: $medium) {
                max-width: initial;
               }
               .swell-table-responsive {
                 border: 0;
                 min-height: 220px;
                 max-height: 220px;
                 overflow-y: scroll;
                 padding-right: 20px;
                 @media ($min: $medium) {
                   min-height: 225px;
                   max-height: 225px;
                 }
                 &::-webkit-scrollbar {
                   width: 0.6em;
                 }
                 &::-webkit-scrollbar-track {
                   background-color: rgba(248, 248, 248, 0.2);
                   border-top-left-radius: 4px;
                   border-top-right-radius: 4px;
                   border-bottom-left-radius: 4px;
                   border-bottom-right-radius: 4px;
                   @media($min: $medium) {
                    background-color: #f8f8f8;
                   }
                 }
                 &::-webkit-scrollbar-thumb {
                   background-color: $colorWhite;
                   outline: 1px solid slategrey;
                   border-top-left-radius: 4px;
                   border-top-right-radius: 4px;
                   border-bottom-left-radius: 4px;
                   border-bottom-right-radius: 4px;
                   @media($min: $medium) {
                    background-color: #ba212b;
                   }
                 }
                 .swell-referral-table {
                   width: 100%;
                   border-collapse: collapse;
                   background-color: transparent;
                   thead, tbody {
                     tr {
                       border: 0;
                       th, td {
                        font-size: 14px;
                        font-weight: normal;
                        font-stretch: normal;
                        font-style: normal;
                        letter-spacing: normal;
                        text-align: left;
                        font-family: $theme-font-dinalternate;
                        color: $colorWhite;
                        padding: 10px 5px;
                        border: 0;                                 
                        background-color: transparent;
                        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                        width: 360px;
                        max-width: 270px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        box-shadow: none;
                         @media($min:$small) {
                           font-size: 16px;
                         }
                       }
                       th {
                         font-size: 16px;
                         font-weight: bold;
                         color: $colorWhite;
                         text-transform: uppercase;
                       }
                       &:last-child{
                        td {
                           border-bottom: 0;
                         }  
                       }
                     }
                   }
                 }
               }
             }
             .redeem-point {
               .swell-referral-heading {
                 .swell-heading {
                  font-size: 22px;
                  font-weight: bold;
                  font-stretch: normal;
                  font-style: normal;
                  line-height: normal;
                  letter-spacing: 0.8px;
                  text-align: center;
                  color: $colorWhite;
                  font-family: $theme-font-dinalternate;            
                  text-transform: uppercase;
                  margin-bottom: 10px;
                    @media ($min: $medium) {
                      text-align: left;
                    }
                 }
                 .swell-detail {
                  font-size: 14px;
                  font-weight: bold;
                  font-stretch: normal;
                  font-style: normal;
                  line-height: normal;
                  letter-spacing: normal;
                  text-align: center;
                  color: $colorWhite;
                  font-family: $theme-font-dinalternate;
                  max-width: 330px;
                  margin: 0 auto 15px;            
                  @media($min:$small) {
                    font-size: 18px;
                    max-width: 430px;
                  }
                  @media($min:$medium) {
                    text-align: left;
                    font-size: 16px;
                    max-width: 430px;
                  }
                 }
               }
             }
           }
         }
       }
     }
   }

   .swell-referral-back-link {
     width: 1.5em;
     height: 1.5em;
     max-width: 18px;
     max-height: 18px;
     display: block;
     vertical-align: middle;
     margin-left: auto;
     cursor: pointer;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     margin: 0 auto;
     cursor: pointer;
     &:after, &:before {
       background: $colorWhite;
       content: "";
       height: 2px;
       max-width: calc(18px * 1.414);
       position: absolute;
       top: 0;
       transition: 0.05s ease-in-out background-color;
       width: calc(1.5em * 1.414);
     }
     &:before {
       left: 0;
       -webkit-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
       transform: rotate(45deg);
       -webkit-transform-origin: left;
       -ms-transform-origin: left;
       transform-origin: left;
     }
     &:after {
       right: 0;
       -webkit-transform: rotate(-45deg);
       -ms-transform: rotate(-45deg);
       transform: rotate(-45deg);
       -webkit-transform-origin: right;
       -ms-transform-origin: right;
       transform-origin: right;
     }
     @media ($min: $small) {
       width: 2em;
       height: 2em;
       max-width: 25px;
       max-height: 25px;
       &:after, &:before {
         max-width: calc(25px * 1.414);
         width: calc(2em * 1.414);
       }
     }
   }

   .swell-referral-copy {
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background-color: rgba(0,0,0,0.5);
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0 25px;
     .swell-referral-copy-content {
       width: 100%;
       margin: 0 auto;
       position: relative;
       @media($min: $medium) {
         display: flex;
         max-width: 700px;
       }
       .swell-referral-copy-sidebar {
         display: none;
       }
       .swell-referral-copy-main {
         text-align: center;
         background-color: #ba212b;    
         padding: 50px 15px;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         width: 100%;
         max-width: 370px;
         margin: 0 auto;
         @media($min: $medium) {
           max-width: 450px;
         }
         .swell-referral-heading {
           display: none;
         }
         .swell-referral-back-link {
           position: absolute;
           max-width: 35px;
           max-height: 35px;
           top: -40px;
           right: 0;
           left: 0;
           @media($min: $medium) {
             max-width: 25px;
             max-height: 25px;
           }
           &:before,
           &:after {
             background: $colorWhite;
             max-width: calc(35px * 1.414);
             @media($min: $medium) {
              max-width: calc(25px * 1.414);
             }
           }
         }
         .swell-referral-copy-link {
          font-size: 22px;
          font-weight: bold;
          font-stretch: normal;
          font-style: normal;
          line-height: normal;
          letter-spacing: normal;
          text-align: center;
          margin-bottom: 20px;
          color: $colorWhite;
          font-family: $theme-font-dinalternate;
          text-transform: uppercase;
           @media($min:$small) {
             font-size: 24px;
           }
           @media($min:$medium) {
             font-size: 32px;
           }
         }
         .swell-referral-copy-button {
           max-width: 150px;
           width: 100%;
           height: 52px;
           font-size: 15px;
           font-weight: bold;
           font-stretch: normal;
           font-style: normal;
           line-height: normal;
           letter-spacing: normal;
           text-align: center;
           font-family: $theme-font-dinalternate;
           color: rgba(255, 255, 255, 0.7);
           background-color: transparent;
           border: 1px solid $colorWhite;
           margin-bottom: 25px;
           text-transform: uppercase;
           outline: none;
           @media($min: $medium) {
            height: 42px;
            max-width: 170px;
           }
           &:hover{
            &:hover {
              background: #fc0d1b;
              border: 1px solid #fc0d1b;
            }
           }
         }
         .swell-referral-details {
            font-size: 14px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: normal;
            letter-spacing: normal;
            text-align: center;
            color: #fefefe;
            font-family: $theme-font-dinalternate;
           @media($min:$small) {
             font-size: 16px;
           }
         }
       }
     }
   }

.swell-post-checkout {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 15px;
  .checkout-heading {
    position: relative;
    .swell-referral-back-link {
      top: -10px;
      left: 0;
      right: 0;
      margin: 0 auto;
      max-width: 30px;
      width: 30px;
      @media($min: $small) {
        top: -18px;
        width: 36px;
        max-width: 36px;
      }
      @media($min: $medium) {
        width: 25px;
        max-width: 25px;
      }
      @media($min: $small) {
      }
      &:after, &:before {
        max-width: calc(30px * 1.414);
        width: calc(30px * 1.414);
        @media($min: $small) {
          width: calc(36px * 1.414);
          max-width: calc(36px * 1.414);
        }
        @media($min: $medium) {
          width: calc(25px * 1.414);
          max-width: calc(25px * 1.414);
        }
      }
    }
    .swell-post-checkout-heading {
      font-family: $theme-font-dinalternate;
      font-size: 22px;
      color: $colorWhite;
      padding-top: 1.5em;
      max-width: 300px;
      margin: 0 auto;
      @media($min: $small) {
        font-size: 26px;
      }
    }
  }
  .swell-post-checkout-holder {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    .referral-section {
      background: transparent;
      .referral-section-holder {
        background: transparent;
        .swell-referral-holder {
          max-width: 450px;
          margin: 0 auto;
          flex-basis: 100%;
          padding: 40px 0 50px;
          @media($min: $medium) {
            max-width: 600px;
          }
          .refer-friend{
            font-family: $theme-font-dinalternate;
            color: $colorWhite;
            font-size: 22px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: normal;
            letter-spacing: normal;
            text-align: left;
            max-width: 410px;
            width: 100%;
            margin: 0 auto;
            margin-bottom: 15px;
            display: none;
            @media($min: $medium) {
              display: block;
            }
          }
          .swell-referral-content-container{
            .swell-referral-content-main{
              .swell-referral-heading{
                font-size: 36px;
                @media($min: $small) {
                  font-size: 48px;
                }
                @media($min: $medium) {
                  font-size: 50px;
                }     
              }
            }
          } 
        }
      }
    }
  }
}
.swell_cart_drawer{
  .cart-page{
    &.swell-cart-redemption-area{
      margin-bottom: 10px;
      .swell-redemption-dropdown{
        flex-basis: 100%;
        width: 100%;
        max-width: 85%;
        margin: 0 auto;
        @media($min: $medium) {
          max-width: 90%  ;
        }
        .swell-redemption-heading .desktop-text{
          display: block;
        }
      }
    }
  }
}
.cart-page{
  &.swell-cart-redemption-area{
    /*display: flex;*/
    display: none;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    @media($min: $medium) {
      justify-content: flex-end;
    }
    .swell-redemption-dropdown{
      flex-basis: 100%;
      width: 100%;
      max-width: 320px;
      @media($min: $medium) {
        max-width: 400px;
      }
      .swell-redemption-heading{
        font-family: $theme-font-dinalternate;
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: center;
        text-transform: none;
        text-align:left;
        color: #242424;
        margin: 0 auto;
        padding: 0;
        margin-bottom: 13px;
        .desktop-text{
          display: block;
          @media(max-width: 768px){
            display: none;
          }
        }
      }
      .swell-redemption-dropdown-holder{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        list-style: none;
        width: 100%;
        padding: 0;
        @media(min-width: 768px){
          flex-direction: row;
          max-width: none;
        }
        li {
          &:nth-child(1) {
            flex-basis: 72%;
            @media(max-width: 768px) {
              flex-basis: 100%;
              margin-bottom: 5px;
              min-width: 100%;
            }
          }
          &:nth-child(2) {
            flex-basis: 26%;
            @media(max-width: 768px) {
              min-width: 100%;
              flex-basis: 100%;
            }
          }
        }
        .selector-holder{
          position: relative;
          .selector-icon{
            position: absolute;
            top: 0%;
            right: 5%;
            left: unset;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            i{
              color: #000;
              font-size: 24px;
            }
          }
        }
        .swell-select-redemption-options{
          font-family: $theme-font-bebas-neuefon;
          font-weight: bold;
          color: #585858;
          font-size: 14px;
          padding: 10px 10px;
          width: 100%;
          max-width: 100%;
          border-radius: 5px;
          border: 1px solid #ccc;
          background-color: transparent;
          min-height: 42px;
          -webkit-appearance: none;
          option{
            text-shadow: none;
            background: #fff;
            border: 1px soild #fff;
          }
          @media(max-width: 768px){
            max-width: none;
            display:block;
          }
        }
        .swell-redemption-apply-btn{
          font-family: $theme-font-bebas-neuefon;
          font-weight: bold;
          font-size: 14px;
          box-shadow: none;
          text-transform: capitalize;
          color: #fff;
          border: 1px solid #c9c9c9;
          background-color: #c9c9c9;
          padding: 0px;
          width: 100%;
          max-width: 120px;
          border-radius: 5px;
          min-height: 42px;
          @media(max-width: 768px){
            max-width: none;
          }
          &:hover{
            border: 1px solid #fc0d1b;
            background-color: #fc0d1b;
            color: #fff;
          }
        }
      }
    }
  }  
}

 .swell-modal {
   position: fixed;
   top: 0;
   width: 100%;
   height: 100%;
   left: 0;
   right: 0;
   z-index: 999;
   background-color: rgba(153, 153, 153, 0.25);
   display: none;
   align-items: center;
   justify-content: center;
   .modal-dialog {
     max-width: 500px;
     margin: 0 auto;
     width: 100%;
     border: 1px solid #999;
     box-shadow: 0 3px 9px rgba(0,0,0,.5);
     .modal-content {
       .modal-header {
         background-color: #1A242F;
         color: #fff;
         text-align: left;
         padding: 15px;
         position: relative;
         h4 {
           margin: 0;
           font-size: 20px;
           color: #fff;
           font-weight: normal;
           font-family: 'Open Sans';
         }
         .close {
           font-size: 30px;
           color: #fff;
           opacity: 1;
           font-weight: normal;
           position: absolute;
           top: 10px;
           right: 12px;
           background-color: transparent;
           border: 0;
           font-family: 'Open Sans';
           line-height: 0.6;
           font-weight: 100;
           padding: 0;
           outline: 0;
           cursor: pointer;
         }
       }
       .modal-body {
         margin: 0;
         padding: 15px;
         background-color: #fff;
         color: #333;
         text-align: center;
         opacity: 1;
         transform: none;
         p {
           font-family: 'Open Sans';
           margin-bottom: 15px;
           color: #000;
           font-size: 16px;
           font-weight: 400;
           .allow-it {
             font-family: 'Open Sans';
             color: #333;
             background-color: #fff;
             border-color: #ccc;
             padding: 10px 12px;
             font-size: 14px;
             font-weight: 400;
             margin-top: 20px;
             border-radius: 4px;
             cursor: pointer;
             outline: 0;
           }
         }
         .bold-text {
           font-weight: bold;
         }
       } 
     }
   }
 }