/*
    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=stencilFontFamily("body-font")');
@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: Signika,Arial,Helvetica,sans-serif;
}

.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:  #7caa48;
}

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


/* ____________________________________
   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 15px;
    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: Signika,sans-serif;
    font-size: 20px;
    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: #7caa48;
    border-bottom: 4px solid #373737;
}
.sweettooth-explainer.green .cta-button:hover {
    background-color: #4d878f;
}

@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: center;
}
.sweettooth-explainer .earning-box .earning-icon:before {
    margin: 0;
    font-size: 45px;
    text-align: center;
}
.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: #7caa48; text-shadow: 2px 2px 7px #BECEC6; }

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

.sweettooth-explainer .earning-box .earning-amount .points-value {
    font-family: inherit;
    font-size: 37px;
    font-weight: 500;
    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: #7caa48;
    border-bottom-color: #7caa48;
}

.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: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}
.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: inherit;
    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: #15453c;
}

@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: 20px 15px;
}

/* _________________
   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 #7caa48;
}

.sweettooth-explainer .points-worth-box .label {
    font-family: inherit;
    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/tgs-gold-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 54px 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 #7caa48;
    border-bottom: 7px solid #7caa48;
}
.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: 54px;
    border-top: solid 4px;
}
.sweettooth-explainer.golden .faq-bg,
.sweettooth-explainer.blue .faq-bg,
.sweettooth-explainer.green .faq-bg {
    border-top-color: #15453c;
}

.sweettooth-explainer .faq .question-list {
    padding: 0;
    list-style-type: none;
    text-align: center;
    margin: 0 15px;
}
.sweettooth-explainer .faq .question {
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    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: #7caa48;
    border-bottom-color: #7caa48;
}

.sweettooth-explainer .faq .answer {
    margin: 10px 0px 15px 10px;
    display: block;
    font-family: inherit;
    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]
***********************/


.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); */
}