@charset "utf-8";

/*

	C-Store on site messaging

*/
    
/*
	General styling
*/

    .onSite {
        float: left;
        display: block;
        width: 100%;
        padding: 0;
        border-top: 6px solid #1393d1;
        background-color: #000000;
    }
    .onSite-cst-home {
        float: left;
        display: block;
        width: 100%;
        padding: 0;
        border-top: 4px solid #1393d1;
        background-color: #f0f2f2; 
    }
    .full-width {
        float: left;
        width: 100%;
        margin: 0;
        padding: 30px 30px 0 30px;
        display: block;
    }
    .full-width-center {
        float: left;
        width: 100%;
        margin: 0;
        padding: 20px;
        display: block;
        text-align: center;
    }
    .portfolio {
        display: inline-block;
        width: 100%;
        margin: 0 auto;
        padding: 0 20px;
        text-align: center;
    }
        .portfolio img {
            vertical-align: bottom;
            float: none;
        }
    .screen {
        display: inline-block;
        width: 100%;
        margin: 0 auto;
        padding: 0 20px;
        text-align: center;
    }
        .screen img {
            vertical-align: bottom;
            float: none;
            width: 80%;
        }
    .left-col {
        float: left;
        display: block;
        width: 50%;
        padding: 20px;
    }
        .left-col h2  {
            color: #ffffff;
            margin-bottom: 8px;
        }
        .left-col p  {
            color: #ffffff;
            margin-bottom: 0;
        }
        .left-col p:last-child  {
            margin-bottom: 0;
        }
    .left-col-gold {
        float: left;
        display: inline-block;
        width: 50%;
        /* padding: 20px; */
        margin: 20px;
    }
        .left-col-gold h2  {
            color: #ffffff;
            margin-bottom: 8px;
        }
        .left-col-gold p  {
            color: #ffffff;
            margin-bottom: 0;
        }
        .left-col-gold p:last-child  {
            margin-bottom: 0;
        }
    .right-col {
        float: left;
        display: block;        
        width: 50%;
        padding: 20px;
        text-align: right;
    }        
        .right-col .button {
            margin-bottom: 20px;
        }
    .right-col-gold {
        float: left;
        display: inline-block;
        width: 50%;
        /* padding: 20px; */
        text-align: left;
        margin: 20px 20px 0px 20px;
    }
    .small { 
        padding: 0 40px; 
    }
    .btn-display2 {
        display: none;
    }
    #cst-onSite {
        position: relative;
    }
    #cst-onSite h2 {
        font-family: PT Sans,sans-serif;
        font-weight: 700;
        font-size: 2.027rem;
        line-height: 2.281rem;
        color: #000000;
        margin-bottom: 10px;
        text-transform: none!important;
    }
    #cst-onSite h3 {
        font-family: PT Sans,sans-serif;
        font-weight: 700;
        font-size: 1.424rem;
        line-height: 1.802rem;
        color: #000000;
        margin-bottom: 10px;
    }
    #cst-onSite h4 {
        font-family: PT Sans,sans-serif;
        font-weight: 700;
        font-size: 1.125rem;
        line-height: 1.602rem;
        color: #000000;
        margin-bottom: 10px;
    }
    #cst-onSite p {
        font-size: 1.25rem;
        line-height: 1.75rem;
        color: #000000;   
    }
    .onSite-flex {
        display: flex;
        align-items: center;
    }
    .onSite-flexEnd {
        display: flex;
        align-items: flex-end;
    }
    #btn-right {
        text-align: right;
    }
    #cst-onSite .button {
        background-color: #ff8a00;
        color: #FFFFFF;
        font-size: 1.25rem;
        padding: 10px;
    }

    #cst-onSite-plat {
        position: relative;
    }
    #cst-onSite-plat h2 {
        font-family: PT Sans,sans-serif;
        font-weight: 400;
        font-size: 2.027rem;
        line-height: 2.281rem;
        color: #000000;
        margin-bottom: 10px;
        text-transform: none!important;        
    }
    #cst-onSite-plat h3 {
        font-family: PT Sans,sans-serif;
        font-weight: 400;
        font-size: 1.8rem;
        line-height: 2.281rem;
        color: #ffffff;
        margin-bottom: 20px;
    }
    #cst-onSite-plat p {
        font-size: 1.25rem;
        line-height: 1.75rem;
        color: #FFFFFF;   
    }

    #cst-onSite-plat .button {
        background-color: #ff8a00;
        color: #FFFFFF;
        font-size: 1.25rem;
        padding: 10px;
    }
    .plat-cta {
        padding: 20px;
        background-color: #1393d1;
        color: #FFFFFF;
        font-size: 1.65rem;
    }
    #cst-onSite .onSite-img {
        padding: 20px 10px 0 10px;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    /**#cst-onSite img {
        float: left;
    }**/

    #onSite-top-unknown {
        background-image: url(/pictures/web/p/h/d/grocer_30dayft_957390.png); 
        background-repeat: no-repeat; 
        background-position: bottom 0 right 0;
        width: 100%;
        float: left;
    }
    #onSite-top-unknown p {
        display: inline-block;
        margin-bottom: 0;
        padding-right: 20px;
    }
    #onSite-top-unknown a {
        display: inline-block;
        margin: 10px 0 0 0;
    }
    #onSite-top-unknown .full-width {
        padding: 20px;
    }
    #onSite-middle-gold {
        background-image: url(/pictures/web/f/k/k/grocer_hp_middlepos_goldmemberloggedin_428083.jpg); 
        background-repeat: no-repeat; 
        background-position: bottom 0 right 14px;
        background-size: 45%;
        width: 100%;
        float: left;
    }
    #onSite-middle-gold .full-width {
        padding: 20px;
    }      
    #logo img {
        float: none;
        margin: 0 5px 0 0;
        width: 150px;
    }
    .cst-logo {
        float: none;
        width: 150px;
        margin-bottom: 20px;
    }
    .c-store-logo {
        width: 150px;
        margin-bottom: 10px;
    }
    .btm-cta {
        height: 300px;
    }
    .btm-img {
        float: left;
        width: 100%;
        padding: 30px;
        background-image: url(/pictures/web/k/m/k/grocer_hp_bottom_trialunknown_opennew_776479.jpg);
        background-repeat: no-repeat;
        background-position: bottom center;
        height: 310px;
    }
    .btm-img-gold {
        float: left;
        width: 100%;
        padding: 30px;
        background-image: url(/pictures/web/b/r/f/grocer_hp_bottom_goldmemberloggedin_800098.jpg);
        background-repeat: no-repeat;
        background-position: bottom center;
        height: 310px;
    }
    .btm-img-gold-trial {
        float: left;
        width: 100%;
        padding: 30px;
        background-image: url(/pictures/web/b/r/j/homepagebottom_goldtrialloggedin_164095.jpg);
        background-repeat: no-repeat;
        background-position: bottom 20px center;
        height: 340px;
    }
    .btm-img-plat {
        background-image: url(/pictures/web/r/v/z/runningman_208163.png);
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: contain;
        height: 300px;
    }
    .bundle-btm {
        vertical-align: bottom;
        float: none;
        margin: 0;
        padding: 0;
    }
/*
	Responsive styling
*/

    @media screen and (min-width: 240px) and (max-width: 1023px) {
        .btm-img  {
            background-size: 95%;
            background-position: bottom center;
        }
        .btm-img-gold  {
            background-size: 75%;
            background-position: bottom center;
            height: 350px;
        }        
        #onSite-top-unknown h2 {
            font-size: 1.6rem;
            line-height: 1.9rem;
            margin-bottom: 8px;
        }
        #cst-onSite h3 {
            font-size: 1.424rem;
            line-height: 1.802rem;
        }        
        #onSite-middle-gold {
            background-image: none;
        }        
}
    @media screen and (min-width: 240px) and (max-width: 767px) {

        #onSite-top-unknown {
            background-image: none;
        }
        #onSite-middle-gold {
            background-image: none;
        }         
        #onSite-top-unknown h2 {
            font-size: 1.3rem;
            line-height: 1.4rem;
            margin-bottom: 6px;
        }
        .onSite-flex {
            display: inline-block;
        }
        .onSite-flexEnd {
            display: inline-block;
        }         
        .btm-cta {
            height: 400px;
        }        
        .left-col { 
            width: 100%;
        }
        .left-col-gold { 
            width: 100%;
        }
        .right-col {
            width: 100%;
            text-align: left;
            padding-top: 0;
        }
        .right-col-gold {
            width: 100%;
            text-align: center;
            padding: 0 20px;
            margin: 0;
        }
        .screen img {
            width: 100%;
            margin-bottom: 60px;            
        }        
        .btm-img {
            height: 250px;
        }
        .btm-img-gold {
            height: 230px;
        }
        #cst-onSite h3 {
            font-size: 1.424rem;
            line-height: 1.802rem;
        }
        .btn-display {
            display: none;
        }        
        .btn-display2 {
            display: block;
            width: fit-content;
            margin-top: 20px;
            margin-bottom: 0!important;
        }        
}