/*
    LOYALTY PROGRAM EXPLAINER PAGE - STYLESHEET : Minimal Theme v1.0.1
    ===========================================   =====================
    Provided by Sweet Tooth Rewards.              sweettoothrewards.com
*/

@import url('https://fonts.googleapis.com/css?family=Unna');
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,600');

/****************************************
    [ Temporary Global Styles]
****************************************/
body {
    margin: 0px;
}

#sweettooth-explainer-stylesheet-warning {
    display: none;
}


/*********************
    [ General Styles ]
**********************/


/* _______________
   Common Headings
*/
.sweettooth-explainer h1,
.sweettooth-explainer h2,
.sweettooth-explainer h3 {
    display: inline-block;
    font-family: Unna;
}

.sweettooth-explainer h2 {
    font-size: 30px;
    font-weight: 400;
    line-height: 34px;
    margin: 25px auto 50px auto;
    padding-bottom: 35px;
    border-bottom: 2px solid;
}
.sweettooth-explainer.golden h2 {
    color: black;
    border-bottom-color: #ac9456;
}
.sweettooth-explainer.blue h2 {
    color: black;
    border-bottom-color:  #4a90e2;
}
.sweettooth-explainer.green h2 {
    color: black;
    border-bottom-color:  #326829;
}

.sweettooth-explainer h3 {
    width: 100%;
    font-size: 30px;
    font-weight: 400;
    margin: 35px 0 50px 0;
    text-align: left;
}


/* ____________________________________
   Backgrounds, Sections & Descriptions
*/
.sweettooth-explainer .section {
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 975px;
}

.sweettooth-explainer .section-description {
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    max-width: 623px;
    margin: auto;
}
.sweettooth-explainer.golden .section-description,
.sweettooth-explainer.blue .section-description,
.sweettooth-explainer.green .section-description
{
    color: #909090;
}

.sweettooth-explainer .background,
.sweettooth-explainer .no-background{
    padding: 20px 0;
    overflow: auto;
}
.sweettooth-explainer.golden .background,
.sweettooth-explainer.blue .background,
.sweettooth-explainer.green .background
{
    background-color: #ececec;
}


/* __________
   CTA Button
*/
.sweettooth-explainer .cta-button {
    display: inline-block;
    height: 29px;
    width: 330px;
    padding: 15px 0px;
    margin-top: 42px;
    font-family: Unna;
    font-size: 26px;
    font-weight: 400;
    line-height: 29px;
    text-decoration: none;
    box-sizing: content-box;
}
.sweettooth-explainer.golden .cta-button {
    color: white;
    background-color: #ac9456;
    border-bottom: 4px solid #373737;
}
.sweettooth-explainer.golden .cta-button:hover {
    background-color: #BA9D4C;
}
.sweettooth-explainer.blue .cta-button {
    color: white;
    background-color: #4a90e2;
    border-bottom: 4px solid #373737;
}
.sweettooth-explainer.blue .cta-button:hover {
    background-color: #82ABD6;
}
.sweettooth-explainer.green .cta-button {
    color: white;
    background-color: #326829;
    border-bottom: 4px solid #373737;
}
.sweettooth-explainer.green .cta-button:hover {
    background-color: #397C2C;
}

@media screen and (max-width: 950px)
{
    .sweettooth-explainer .cta-button {
        font-size: 24px;
        height: 26px;
        width: 300px;
    }
}
@media screen and (max-width: 500px)
{
    .sweettooth-explainer .cta-button {
        font-size: 22px;
        height: 22px;
        width: 272px;
        padding-top: 10px;
    }
}


/* ___________
   Earning Box
*/
.sweettooth-explainer .earning-box {
    display: inline-block;
    vertical-align: top;
    width: 220px;
    padding: 20px 10px 15px 10px;
}

.sweettooth-explainer .earning-box .earning-icon {
    height: 45px;
    width: 100%;
    background: transparent no-repeat bottom left;
    text-align: left;
}
.sweettooth-explainer .earning-box .earning-icon:before {
    margin: 0;
    font-size: 45px;
    text-align: left;
}
.sweettooth-explainer.golden .earning-box .earning-icon:before {  color: #ac9456; text-shadow: 2px 2px 7px #DAD3BF; }
.sweettooth-explainer.blue .earning-box .earning-icon:before {  color: #4a90e2; text-shadow: 2px 2px 7px #BBD2EB; }
.sweettooth-explainer.green .earning-box .earning-icon:before {  color: #326829; text-shadow: 2px 2px 7px #BECEC6; }

.sweettooth-explainer .earning-box .earning-amount {
    margin-top: 10px;
    text-align: left;
}

.sweettooth-explainer .earning-box .earning-amount .points-value {
    font-family: Unna;
    font-size: 44px;
    font-weight: 400;
    line-height: 50px;
    border-bottom: 2px solid;
}
.sweettooth-explainer.golden .earning-box  .earning-amount .points-value {
    color: #ac9456;
    border-bottom-color: #ac9456;
}
.sweettooth-explainer.blue .earning-box  .earning-amount .points-value {
    color: #4a90e2;
    border-bottom-color: #4a90e2;
}
.sweettooth-explainer.green .earning-box  .earning-amount .points-value {
    color: #326829;
    border-bottom-color: #326829;
}

.sweettooth-explainer .earning-box .earning-amount .points-label {
    text-transform: uppercase;
    font-size: 14px;
}
.sweettooth-explainer.golden .earning-box .earning-amount .points-label,
.sweettooth-explainer.blue .earning-box .earning-amount .points-label,
.sweettooth-explainer.green .earning-box .earning-amount .points-label {
    color: #666;
}

.sweettooth-explainer .earning-box .earning-description {
    margin-top: 16px;
    font-family: Unna;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}
.sweettooth-explainer.golden .earning-box .earning-description,
.sweettooth-explainer.blue .earning-box .earning-description,
.sweettooth-explainer.green .earning-box .earning-description, {
    color: #373737;
}


/* ______________
   Explainer Body
*/
.sweettooth-explainer {
    margin: auto;
    font-family: "Work Sans";
    font-size: 14px;
    line-height: 26px;
    max-width: 1440px;
    text-align: center;
}
.sweettooth-explainer.golden,
.sweettooth-explainer.blue,
.sweettooth-explainer.green {
    color: #373737;
}

/**********************
    [ Program Summary ]
**********************/
.sweettooth-explainer .program-summary {
    max-width: 708px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}

.sweettooth-explainer .program-summary h1 {
    font-size: 58px;
    font-weight: 400;
    line-height: 66px;
    margin-top: 70px;
    margin-bottom: 18px;
}
.sweettooth-explainer.golden .program-summary h1,
.sweettooth-explainer.blue .program-summary h1,
.sweettooth-explainer.green .program-summary h1 {
    color: #373737;
}

@media screen and (max-width: 950px)
{
    .sweettooth-explainer .program-summary h1 {
        font-size: 48px;
        line-height: 58px;
    }
}
@media screen and (max-width: 500px)
{
    .sweettooth-explainer .program-summary h1 {
        font-size: 43px;
        line-height: 56px;
    }
}

.sweettooth-explainer .program-summary .program-description {
    margin-top: 20px;
}

/* _________________
   Points Worth Box
*/
.sweettooth-explainer.golden .points-worth-box-bg,
.sweettooth-explainer.blue .points-worth-box-bg,
.sweettooth-explainer.green .points-worth-box-bg {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ececec 0%, #ececec 49%, #ffffff 50%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ececec 0%,#ececec 49%,#ffffff 50%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ececec 0%,#ececec 49%,#ffffff 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.sweettooth-explainer .points-worth-box {
    margin: 35px auto;
    padding: 50px 10px;
}
.sweettooth-explainer.golden .points-worth-box {
    background-color: white;
    border: 2px solid #ac9456;
}
.sweettooth-explainer.blue .points-worth-box {
    background-color: white;
    border: 2px solid #4a90e2;
}
.sweettooth-explainer.green .points-worth-box {
    background-color: white;
    border: 2px solid #326829;
}

.sweettooth-explainer .points-worth-box .label {
    font-family: Unna;
    font-size: 30px;
    font-weight: 400;
    padding: 0 20px;
    vertical-align: middle;
    white-space: nowrap;
}
.sweettooth-explainer.golden .points-worth-box .label,
.sweettooth-explainer.blue .points-worth-box .label,
.sweettooth-explainer.green .points-worth-box .label {
    color: #4a4a4a;
}

.sweettooth-explainer .points-worth-box .worth {
    font-size: 20px;
    font-weight: 400;
    padding: 0 20px;
    white-space: nowrap;
    vertical-align: middle;
}
.sweettooth-explainer.golden .points-worth-box .worth,
.sweettooth-explainer.blue .points-worth-box .worth,
.sweettooth-explainer.green .points-worth-box .worth {
    color: #4a4a4a;
}

.sweettooth-explainer .points-worth-box .points-icon {
    margin: auto;
    width: 50px;
    height: 50px;
    padding: 0 10px;
    vertical-align: middle;
    display: inline-block;
    background: transparent no-repeat center;
}
.sweettooth-explainer.golden .points-worth-box .points-icon {
    background-image: url('../img/golden-icon-heart-circle.png');
}
.sweettooth-explainer.blue .points-worth-box .points-icon {
    background-image: url('../img/blue-icon-heart-circle.png');
}
.sweettooth-explainer.green .points-worth-box .points-icon {
    background-image: url('../img/green-icon-heart-circle.png');
}
@media screen and (max-width: 950px)
{
    .sweettooth-explainer .points-worth-box {
        padding-top: 45px;
        padding-bottom: 45px;
    }
    .sweettooth-explainer .points-worth-box .label {
        font-size: 28px;
    }
    .sweettooth-explainer .points-worth-box .worth {
        font-size: 19px;
    }
}
@media screen and (max-width: 900px)
{
    .sweettooth-explainer .points-worth-box {
        padding: 30px 10px;
    }
    .sweettooth-explainer .points-worth-box .points-icon {
        display: block;
        padding: 25px 10px;
    }
}
@media screen and (max-width: 500px)
{
    .sweettooth-explainer .points-worth-box .label {
        font-size: 26px;
    }
    .sweettooth-explainer .points-worth-box .worth {
        font-size: 18px;
    }
}



/*********************
    [ Earning Legend ]
*********************/
.sweettooth-explainer .earning-legend .earning-options {
    margin: 60px auto;
    text-align: center;
}
/* 3 items per row:  */
@media screen and (max-width: 990px)
{
    .sweettooth-explainer .earning-legend .earning-options {
        max-width: 730px;
    }
}
/* 2 items per row: */
@media screen and (max-width: 750px)
{
    .sweettooth-explainer .earning-legend .earning-options {
        max-width: 485px;
    }
}
/* 1 items per row: */
@media screen and (max-width: 510px)
{
    .sweettooth-explainer .earning-legend .earning-options {
        max-width: 240px;
    }
    .sweettooth-explainer .earning-legend .earning-box {
        margin-top: 20px;
    }
}


/**********************
    [ Invite a Friend ]
**********************/
.sweettooth-explainer .referral-box {
    display: inline-block;
    margin: 54px auto auto auto;
    padding: 35px 25px;
    width: 216px;
}
.sweettooth-explainer.golden .referral-box {
    background-color: white;
    border: 2px solid #ac9456;
    border-bottom: 7px solid #ac9456;
}
.sweettooth-explainer.blue .referral-box {
    background-color: white;
    border: 2px solid #4a90e2;
    border-bottom: 7px solid #4a90e2;
}
.sweettooth-explainer.green .referral-box {
    background-color: white;
    border: 2px solid #326829;
    border-bottom: 7px solid #326829;
}
.sweettooth-explainer .referral-box .earning-box {
    margin: auto;
    width: 126px;
}
.sweettooth-explainer .referral-box .earning-icon {
    background-position: center;
}

/**********
    [ FAQ ]
***********/
.sweettooth-explainer .faq-bg {
    margin-top: 30px;
    border-top: solid 4px;
}
.sweettooth-explainer.golden .faq-bg,
.sweettooth-explainer.blue .faq-bg,
.sweettooth-explainer.green .faq-bg {
    border-top-color: black;
}

.sweettooth-explainer .faq .question-list {
    padding: 0;
    list-style-type: none;
    text-align: left;
}
.sweettooth-explainer .faq .question {
    font-family: "Work Sans";
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
}
.sweettooth-explainer.golden .faq .question {
    color: #ac9456;
    border-bottom-color: #ac9456;
}
.sweettooth-explainer.blue .faq .question {
    color: #4a90e2;
    border-bottom-color: #4a90e2;
}
.sweettooth-explainer.green .faq .question {
    color: #326829;
    border-bottom-color: #326829;
}

.sweettooth-explainer .faq .answer {
    margin: 10px 0px 15px 10px;
    display: block;
    font-family: Unna;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}
.sweettooth-explainer.golden .faq .answer,
.sweettooth-explainer.blue .faq .answer,
.sweettooth-explainer.green .faq .answer {
    color: #373737;
}

/***********************
    [ Font Icon Support]
***********************/
@font-face {
    font-family: 'fontello';
    src: url('../fonts/fontello.eot');
    src: url('../fonts/fontello.eot') format('embedded-opentype'),
        url('../fonts/fontello.woff2') format('woff2'),
        url('../fonts/fontello.woff') format('woff'),
        url('../fonts/fontello.ttf') format('truetype'),
        url('../fonts/fontello.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.sweettooth-explainer [class^="st-icon-"]:before,
.sweettooth-explainer [class*=" st-icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.st-icon-music:before { content: '\e800'; } /* 'î €' */
.st-icon-search:before { content: '\e801'; } /* 'î ' */
.st-icon-mail:before { content: '\e802'; } /* 'î ‚' */
.st-icon-heart:before { content: '\e803'; } /* 'î ƒ' */
.st-icon-star:before { content: '\e804'; } /* 'î „' */
.st-icon-user:before { content: '\e805'; } /* 'î …' */
.st-icon-videocam:before { content: '\e806'; } /* 'î †' */
.st-icon-camera:before { content: '\e807'; } /* 'î ‡' */
.st-icon-photo:before { content: '\e808'; } /* 'î ˆ' */
.st-icon-attach:before { content: '\e809'; } /* 'î ‰' */
.st-icon-lock:before { content: '\e80a'; } /* 'î Š' */
.st-icon-eye:before { content: '\e80b'; } /* 'î ‹' */
.st-icon-tag:before { content: '\e80c'; } /* 'î Œ' */
.st-icon-thumbs-up:before { content: '\e80d'; } /* 'î ' */
.st-icon-pencil:before { content: '\e80e'; } /* 'î Ž' */
.st-icon-comment:before { content: '\e80f'; } /* 'î ' */
.st-icon-location:before { content: '\e810'; } /* 'î ' */
.st-icon-cup:before { content: '\e811'; } /* 'î ‘' */
.st-icon-trash:before { content: '\e812'; } /* 'î ’' */
.st-icon-doc:before { content: '\e813'; } /* 'î “' */
.st-icon-note:before { content: '\e814'; } /* 'î ”' */
.st-icon-cog:before { content: '\e815'; } /* 'î •' */
.st-icon-params:before { content: '\e816'; } /* 'î –' */
.st-icon-calendar:before { content: '\e817'; } /* 'î —' */
.st-icon-sound:before { content: '\e818'; } /* 'î ˜' */
.st-icon-clock:before { content: '\e819'; } /* 'î ™' */
.st-icon-lightbulb:before { content: '\e81a'; } /* 'î š' */
.st-icon-tv:before { content: '\e81b'; } /* 'î ›' */
.st-icon-desktop:before { content: '\e81c'; } /* 'î œ' */
.st-icon-mobile:before { content: '\e81d'; } /* 'î ' */
.st-icon-cd:before { content: '\e81e'; } /* 'î ž' */
.st-icon-inbox:before { content: '\e81f'; } /* 'î Ÿ' */
.st-icon-globe:before { content: '\e820'; } /* 'î  ' */
.st-icon-cloud:before { content: '\e821'; } /* 'î ¡' */
.st-icon-paper-plane:before { content: '\e822'; } /* 'î ¢' */
.st-icon-fire:before { content: '\e823'; } /* 'î £' */
.st-icon-graduation-cap:before { content: '\e824'; } /* 'î ¤' */
.st-icon-megaphone:before { content: '\e825'; } /* 'î ¥' */
.st-icon-database:before { content: '\e826'; } /* 'î ¦' */
.st-icon-key:before { content: '\e827'; } /* 'î §' */
.st-icon-beaker:before { content: '\e828'; } /* 'î ¨' */
.st-icon-truck:before { content: '\e829'; } /* 'î ©' */
.st-icon-money:before { content: '\e82a'; } /* 'î ª' */
.st-icon-food:before { content: '\e82b'; } /* 'î «' */
.st-icon-shop:before { content: '\e82c'; } /* 'î ¬' */
.st-icon-diamond:before { content: '\e82d'; } /* 'î ­' */
.st-icon-t-shirt:before { content: '\e82e'; } /* 'î ®' */
.st-icon-wallet:before { content: '\e82f'; } /* 'î ¯' */