@charset "utf-8";

/*

	Grocer on site messaging

*/
    
/*
	General styling
*/

    .onSite {
        float: left;
        display: block;
        width: 100%;
        padding: 0;
        border-top: 6px solid #e40613;
        background-color: #000000;
    }
    .onSite-gold {
        float: left;
        display: block;
        width: 100%;
        padding: 0;
        border-top: 6px solid #fef200;
        background-color: #000000; 
    }
    .onSite-gold-live {
        float: left;
        display: block;
        width: 100%;
        padding: 0;
        border-top: 6px solid #fef200;
        border-bottom: 6px solid #fef200;
        border-bottom-left-radius: 26px;
        border-top-right-radius: 40px;
        background-color: #000000; 
    }
    .onSite-exp {
        float: left;
        display: block;
        width: 100%;
        padding: 0;
        border: 6px solid #e40613;
        background-color: #000000;
    }
    .onSite-plat {
        float: left;
        display: block;
        width: 100%;
        padding: 0;
        border-top: 6px solid #f0f2f2;
        border-bottom: 6px solid #f0f2f2;
        background-color: #000000;
    }
    .full-width {
        float: left;
        width: 100%;
        margin: 0;
        padding: 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: 50%;
        }
    .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;
    }
    #grocer-onSite {
        position: relative;
    }
    #grocer-onSite h2 {
        font-family: ff-unit-slab-web,serif;
        font-weight: 400;
        font-size: 2.027rem;
        line-height: 2.281rem;
        color: #FFFFFF;
        margin-bottom: 10px;
        text-transform: none!important;
    }
    #grocer-onSite h3 {
        font-family: ff-unit-slab-web,serif;
        font-weight: 400;
        font-size: 1.8rem;
        line-height: 2.281rem;
        color: #FFFFFF;
        margin-bottom: 20px;
    }
    #grocer-onSite p {
        font-size: 1.25rem;
        line-height: 1.75rem;
        color: #FFFFFF;   
    }
    .onSite-flex {
        display: flex;
        align-items: center;
    }
    .onSite-flexEnd {
        display: flex;
        align-items: flex-end;
    } 
    #grocer-onSite .button {
        background-color: #e40613;
        color: #FFFFFF;
        font-size: 1.25rem;
        padding: 10px;
        margin-top: 15px;
    }

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

    #grocer-onSite-plat .button {
        background-color: #e40613;
        color: #FFFFFF;
        font-size: 1.25rem;
        padding: 10px;
    }
    .plat-cta {
        padding: 20px;
        background-color: #e40613;
        color: #FFFFFF;
        font-size: 1.65rem;
    }
    #grocer-onSite .onSite-img {
        padding: 20px 10px 0 10px;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    /**#grocer-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;
    }
    .gro-logo {
        float: none;
        width: 150px;
        margin-bottom: 20px;
    }
    .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;
        }
        #grocer-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%;
        }        
        .btm-img {
            height: 250px;
        }
        .btm-img-gold {
            height: 230px;
        }
        #grocer-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;
        }        
}




/*

	NEW STYLING ADDED IN PREPARATIONS FOR THE NEW GATING MESSAGES
	
	24/03/2020
    
*/

/*

    Grocer Gating Styling
    
    thegrocer.co.uk
    
*/



/*
    REGISTER TOP
*/

.reg.grocer-gating {
    margin:  0 0 40px 0;
    padding: 0 0 0 0;
}

.reg.grocer-gating h2, .reg.grocer-gating p, .reg.grocer-gating ul, .reg.grocer-gating ul li, .reg.grocer-gating a {
    color: #FFFFFF;
    font-family: "ff-unit-web-pro", sans-serif;
    line-height: normal;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.reg.grocer-gating.register-block {
    background: #000000;
    color: #FFFFFF;
    text-align: center;
    position: relative;
}

.reg.grocer-gating.register-block {
    padding-bottom: 40px;
}

.reg.grocer-gating.register-block p.sub-sign-in {
    background: #FEF200;
    color: #000000;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    padding: 12px 0;
}

.reg.grocer-gating.register-block p.sub-sign-in a {
    color: #000000;
}

.reg.grocer-gating.register-block h2 {
    color: #FFFFFF;
    font-family: "ff-unit-slab-web", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 35px;
    padding: 40px 0 30px 0;
}

.reg.grocer-gating.register-block ul {
    display: block;
    padding: 0 0 30px 0;
}

.reg.grocer-gating.register-block ul li {
    background-image: url(/pictures/web/h/s/t/tick_726678.png);
    background-position: left center;
    background-repeat: no-repeat;

    display: inline-block;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    letter-spacing: -0.012em;
    margin: 0 0 0 0;
    padding: 5px 30px 3px 35px;
}

.reg.grocer-gating.register-block ul li:last-of-type {
    padding-right: 0;
}

.reg.grocer-gating.register-block img.logo {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.reg.grocer-gating.register-block a.cta-button {
    background: #FEF200;
    border-radius: 6px;
    color: #000000;        
    display: inline-block;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;       
    padding: 16px 20px 14px 20px;
    text-transform: uppercase;
    text-decoration: none;
}

.reg.grocer-gating.register-block a.cta-button:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 700px) {

    .reg.grocer-gating.register-block h2 {
        padding-bottom: 25px;
    }

    .reg.grocer-gating.register-block ul {
        padding-bottom: 38px;
    }        

    .reg.grocer-gating.register-block ul li {
        background-image: none;
        padding: 5px 0 3px 0;
        width: 100%;
    }

    .reg.grocer-gating.register-block ul li:first-of-type {
        background-image: url(/pictures/web/h/s/t/tick2x_562103.png);
        background-position: top center;
        background-size: 40px 40px;
        padding-top: 56px;
    }

    .reg.grocer-gating.register-block a.cta-button {
        margin-bottom: 20px;
    }

    .reg.grocer-gating.register-block img.logo {
        display: block;
        position: relative;
        bottom: auto;
        right: auto;
        margin-left: calc(50% - 50px);
    }        

}


/*
    REGISTER WITH IMAGE
*/

.reg-bottom.grocer-gating {
    margin:  0 0 40px 0;
    padding: 0 0 0 0;
}

.reg-bottom.grocer-gating h2, .reg-bottom.grocer-gating p, .reg-bottom.grocer-gating ul, .reg-bottom.grocer-gating ul li, .reg-bottom.grocer-gating a {
    color: #FFFFFF;
    font-family: "ff-unit-web-pro", sans-serif;
    line-height: normal;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.reg-bottom.grocer-gating.register-block {
    background-color: #000000;
    background:  url("/pictures/web/h/s/t/gatingscreenshots_568629.png") 120% 35% no-repeat, linear-gradient(97deg, rgba(0,0,0,1) 0%, rgba(44,44,44,1) 100%);
    color: #FFFFFF;
    text-align: left;
    position: relative;
}

.reg-bottom.grocer-gating.register-block {
    padding-bottom: 60px;
}

.reg-bottom.grocer-gating.register-block p.sub-sign-in {
    background: #FEF200;
    color: #000000;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    padding: 12px 0;
    text-align: center;
}

.reg-bottom.grocer-gating.register-block p.sub-sign-in a {
    color: #000000;
}

.reg-bottom.grocer-gating.register-block h2 {
    color: #FFFFFF;
    font-family: ff-unit-slab-web, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 35px;
    padding: 27px 0 22px 40px;
}

.reg-bottom.grocer-gating.register-block ul {
    display: block;
    padding: 0 0 20px 40px;
}

.reg-bottom.grocer-gating.register-block ul li {
    background-image: url(/pictures/web/h/s/t/tick_726678.png);
    background-position: left center;
    background-repeat: no-repeat;
    display: block;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    letter-spacing: -0.012em;
    margin: 0 0 10px 0;
    padding: 5px 30px 3px 35px;
}

.reg-bottom.grocer-gating.register-block ul li:last-of-type {
    padding-right: 0;
}

.reg-bottom.grocer-gating.register-block img.logo {
    margin: 40px 0 0 40px;
}

.reg-bottom.grocer-gating.register-block img.logo.mobile-yes {
    display: none;
}

.reg-bottom.grocer-gating.register-block a.cta-button {
    background: #FEF200;
    border-radius: 6px;
    color: #000000;        
    display: inline-block;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;       
    padding: 16px 20px 14px 20px;
    margin: 0 0 0 40px;
    text-transform: uppercase;
    text-decoration: none;
}

.reg-bottom.grocer-gating.register-block a.cta-button:hover {
    text-decoration: underline;
}

@media (min-width: 701px) and (max-width: 1209px) {
     .reg-bottom.grocer-gating.register-block {
        background:  url("/pictures/web/h/s/t/gatingscreenshots_568629.png") 400px 35% no-repeat, linear-gradient(97deg, rgba(0,0,0,1) 0%, rgba(44,44,44,1) 100%);
    }   
}

@media only screen and (max-width: 700px) {

    .reg-bottom.grocer-gating.register-block {
        background: #000000;
        text-align: center;
    }

    .reg-bottom.grocer-gating.register-block h2 {
        padding: 40px 0 25px 0;
    }

    .reg-bottom.grocer-gating.register-block ul {
        padding-left: 0;
        padding-bottom: 38px;
    }        

    .reg-bottom.grocer-gating.register-block ul li {
        background-image: none;
        padding: 5px 0 3px 0;
        margin-bottom: 0;
        width: 100%;
    }

    .reg-bottom.grocer-gating.register-block ul li:first-of-type {
        background-image: url(/pictures/web/h/s/t/tick2x_562103.png);
        background-position: top center;
        background-size: 40px 40px;
        padding-top: 56px;
    }

    .reg-bottom.grocer-gating.register-block a.cta-button {
        margin-left: 0;
        margin-bottom: 20px;
    }

    .reg-bottom.grocer-gating.register-block img.logo {
        display: block;
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 0;
        margin-left: calc(50% - 50px);
    }        

    .reg-bottom.grocer-gating.register-block img.logo.mobile-no {
        display: none;
    }

    .reg-bottom.grocer-gating.register-block img.logo.mobile-yes {
        display: block;
        padding: 0 0 0 0;
    }        

}


/*
    REGISTER WITH IMAGE BARRIER
*/

.reg-bottom-barrier.grocer-gating {
    margin:  0 0 40px 0;
    padding: 0 0 0 0;
}

.reg-bottom-barrier.grocer-gating h2, .reg-bottom-barrier.grocer-gating p, .reg-bottom-barrier.grocer-gating ul, .reg-bottom-barrier.grocer-gating ul li, .reg-bottom-barrier.grocer-gating a {
    color: #FFFFFF;
    font-family: "ff-unit-web-pro", sans-serif;
    line-height: normal;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.reg-bottom-barrier.grocer-gating.register-block {
    background-color: #000000;
    background:  url("/pictures/web/h/s/t/gatingscreenshots_568629.png") 120% 35% no-repeat, linear-gradient(97deg, rgba(0,0,0,1) 0%, rgba(44,44,44,1) 100%);
    color: #FFFFFF;
    text-align: left;
    position: relative;
}

.reg-bottom-barrier.grocer-gating.register-block {
    padding-bottom: 60px;
}

.reg-bottom-barrier.grocer-gating.register-block p.sub-sign-in {
    background: #FEF200;
    color: #000000;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    padding: 12px 0;
    text-align: center;
}

.reg-bottom-barrier.grocer-gating.register-block p.sub-sign-in a {
    color: #000000;
}

.reg-bottom-barrier.grocer-gating.register-block h2 {
    color: #FFFFFF;
    font-family: "ff-unit-slab-web", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 35px;
    padding: 27px 0 22px 40px;
}

.reg-bottom-barrier.grocer-gating.register-block ul {
    display: block;
    padding: 0 0 20px 40px;
}

.reg-bottom-barrier.grocer-gating.register-block ul li {
    background-image: url(/pictures/web/h/s/t/tick_726678.png);
    background-position: left center;
    background-repeat: no-repeat;
    display: block;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    letter-spacing: -0.012em;
    margin: 0 0 10px 0;
    padding: 5px 30px 3px 35px;
}

.reg-bottom-barrier.grocer-gating.register-block ul li:last-of-type {
    padding-right: 0;
}

.reg-bottom-barrier.grocer-gating.register-block img.logo {
    margin: 40px 0 0 40px;
}

.reg-bottom-barrier.grocer-gating.register-block img.logo.mobile-yes {
    display: none;
}

.reg-bottom-barrier.grocer-gating.register-block a.cta-button {
    background: #FEF200;
    border-radius: 6px;
    color: #000000;        
    display: inline-block;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;       
    padding: 16px 20px 14px 20px;
    margin: 0 0 0 40px;
    text-transform: uppercase;
    text-decoration: none;
}

.reg-bottom-barrier.grocer-gating.register-block a.cta-button:hover {
    text-decoration: underline;
}

@media (min-width: 701px) and (max-width: 1209px) {
     .reg-bottom-barrier.grocer-gating.register-block {
        background:  url("/pictures/web/h/s/t/gatingscreenshots_568629.png") 400px 35% no-repeat, linear-gradient(97deg, rgba(0,0,0,1) 0%, rgba(44,44,44,1) 100%);
    }   
}

@media only screen and (max-width: 700px) {

    .reg-bottom-barrier.grocer-gating.register-block {
        background: #000000;
        text-align: center;
    }

    .reg-bottom-barrier.grocer-gating.register-block h2 {
        padding: 40px 0 25px 0;
    }

    .reg-bottom-barrier.grocer-gating.register-block ul {
        padding-left: 0;
        padding-bottom: 38px;
    }        

    .reg-bottom-barrier.grocer-gating.register-block ul li {
        background-image: none;
        padding: 5px 0 3px 0;
        margin-bottom: 0;
        width: 100%;
    }

    .reg-bottom-barrier.grocer-gating.register-block ul li:first-of-type {
        background-image: url(/pictures/web/h/s/t/tick2x_562103.png);
        background-position: top center;
        background-size: 40px 40px;
        padding-top: 56px;
    }

    .reg-bottom-barrier.grocer-gating.register-block a.cta-button {
        margin-left: 0;
        margin-bottom: 20px;
    }

    .reg-bottom-barrier.grocer-gating.register-block img.logo {
        display: block;
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 0;
        margin-left: calc(50% - 50px);
    }        

    .reg-bottom-barrier.grocer-gating.register-block img.logo.mobile-no {
        display: none;
    }

    .reg-bottom-barrier.grocer-gating.register-block img.logo.mobile-yes {
        display: block;
        padding: 0 0 0 0;
    }        

}
    
/*
    SUBSCRIBE GOLD
*/

.subs-gold.grocer-gating {
    border: 5px solid #E40613;
    margin:  0 0 40px 0;
    padding: 0 0 0 0;
}

.subs-gold.grocer-gating h2, .subs-gold.grocer-gating p, .subs-gold.grocer-gating ul, .subs-gold.grocer-gating ul li, .subs-gold.grocer-gating a {
    color: #FFFFFF;
    font-family: "ff-unit-web-pro", sans-serif;
    line-height: normal;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.subs-gold.grocer-gating.subscribe-block {
    background: #000000;
    background: linear-gradient(97deg, rgba(0,0,0,1) 0%, rgba(44,44,44,1) 100%);        
    color: #FFFFFF;
    text-align: center;
    position: relative;
}

.subs-gold.grocer-gating.subscribe-block {
    padding-bottom: 40px;
}

.subs-gold.grocer-gating.subscribe-block p.article-limit {
    border-bottom: 1px solid #E40613;
    display: inline-block;
    font-size: 20px;
    font-weight: 300;
    padding: 40px 0 15px 0;
    text-transform: uppercase;
}

.subs-gold.grocer-gating.subscribe-block h2 {
    color: #FFFFFF;
    font-family: ff-unit-slab-web, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 55px;
    letter-spacing: -0.015em;
    padding: 45px 0 15px 0;
}

.subs-gold.grocer-gating.subscribe-block ul {
    display: block;
    padding: 0 0 40px 0;
}

.subs-gold.grocer-gating.subscribe-block ul li {
    background-image: url(/pictures/web/h/s/t/redtick_378742.png);
    background-position: left center;
    background-repeat: no-repeat;
    color: #DCDCDC;
    display: inline-block;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    letter-spacing: -0.012em;
    margin: 0 0 0 0;
    padding: 5px 30px 3px 35px;
}

.subs-gold.grocer-gating.subscribe-block ul li img {

}

.subs-gold.grocer-gating.subscribe-block ul li:last-of-type {
    padding-right: 0;
}

.subs-gold.grocer-gating.subscribe-block img.logo {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.subs-gold.grocer-gating.subscribe-block a.cta-button {
    background: #E40613;
    border-radius: 6px;
    color: #FFFFFF;        
    display: inline-block;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;       
    padding: 16px 20px 14px 20px;
    text-transform: uppercase;
    text-decoration: none;
}

.subs-gold.grocer-gating.subscribe-block a.cta-button:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 700px) {

    .subs-gold.grocer-gating.subscribe-block p.article-limit {
        font-size: 15px;
        padding: 30px 0 15px 0;
    }        

    .subs-gold.grocer-gating.subscribe-block h2 {
        font-size: 35px;
        padding: 40px 20px 20px 20px;
    }

    .subs-gold.grocer-gating.subscribe-block ul {
        padding-bottom: 38px;
    }        

    .subs-gold.grocer-gating.subscribe-block ul li {
        background-image: none;
        padding: 5px 0 3px 0;
        width: 100%;
    }

    .subs-gold.grocer-gating.subscribe-block ul li:first-of-type {
        background-image: url(/pictures/web/h/s/t/tick2x_562103.png);
        background-position: top center;
        background-size: 40px 40px;
        padding-top: 56px;
    }

    .subs-gold.grocer-gating.subscribe-block a.cta-button {
        margin-bottom: 20px;
    }

    .subs-gold.grocer-gating.subscribe-block img.logo {
        display: block;
        position: relative;
        bottom: auto;
        right: auto;
        margin-left: calc(50% - 50px);
    }        

}

/*
    SUBSCRIBE PLATINUM
*/

   .subs-platinum.grocer-gating {
        border: 5px solid #E40613;
        margin:  0 0 40px 0;
        padding: 0 0 0 0;
    }
    
    .subs-platinum.grocer-gating h2, .subs-platinum.grocer-gating p, .subs-platinum.grocer-gating ul, .subs-platinum.grocer-gating ul li, .subs-platinum.grocer-gating a {
        color: #FFFFFF;
        font-family: "ff-unit-web-pro", sans-serif;
        line-height: normal;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
    }

    .subs-platinum.grocer-gating.subscribe-block {
        background: #000000;
        background: linear-gradient(97deg, rgba(0,0,0,1) 0%, rgba(44,44,44,1) 100%);        
        color: #FFFFFF;
        text-align: center;
        position: relative;
    }

    .subs-platinum.grocer-gating.subscribe-block {
        padding-bottom: 40px;
    }

    .subs-platinum.grocer-gating.subscribe-block p.article-limit {
        border-bottom: 1px solid #E40613;
        display: inline-block;
        font-size: 20px;
        font-weight: 300;
        padding: 40px 0 15px 0;
        text-transform: uppercase;
    }

    .subs-platinum.grocer-gating.subscribe-block h2 {
        color: #FFFFFF;
        font-family: ff-unit-slab-web, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 55px;
        letter-spacing: -0.015em;
        padding: 45px 50px 15px 50px;
    }
    
    .subs-platinum.grocer-gating.subscribe-block h2 + p {
        color: #DCDCDC;
        font-size: 24px;
        letter-spacing: -0.015em;
        line-height: 35px;
        padding: 0 50px 45px 50px;
    }

    .subs-platinum.grocer-gating.subscribe-block img.logo {
        position: absolute;
        bottom: 20px;
        right: 20px;
    }
    
    .subs-platinum.grocer-gating.subscribe-block a.cta-button {
        background: #E40613;
        border-radius: 6px;
        color: #FFFFFF;        
        display: inline-block;
        font-family: "ff-unit-web-pro", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 20px;       
        padding: 16px 20px 14px 20px;
        text-transform: uppercase;
        text-decoration: none;
    }
    
    .subs-platinum.grocer-gating.subscribe-block a.cta-button:hover {
        text-decoration: underline;
    }
    
    @media only screen and (max-width: 700px) {
        
        .subs-platinum.grocer-gating.subscribe-block p.article-limit {
            font-size: 15px;
            padding: 30px 0 15px 0;
        }        
                
        .subs-platinum.grocer-gating.subscribe-block h2 {
            font-size: 35px;
            padding: 40px 20px 20px 20px;
        }
        
        .subs-platinum.grocer-gating.subscribe-block h2 + p {
            font-size: 18px;
            line-height: 25px;
            padding: 0 15px 35px 15px;
        }
                
        .subs-platinum.grocer-gating.subscribe-block a.cta-button {
            margin-bottom: 20px;
        }
        
        .subs-platinum.grocer-gating.subscribe-block img.logo {
            display: block;
            position: relative;
            bottom: auto;
            right: auto;
            margin-left: calc(50% - 50px);
        }        
        
    }

/*

    SUBSCRIBE MIDDLE RED

*/

.subs-middle.grocer-gating {
    margin:  0 0 40px 0;
    padding: 0 0 0 0;
}

.subs-middle.grocer-gating h2, .subs-middle.grocer-gating p, .subs-middle.grocer-gating ul, .subs-middle.grocer-gating ul li, .subs-middle.grocer-gating a {
    color: #FFFFFF;
    font-family: "ff-unit-web-pro", sans-serif;
    line-height: normal;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.subs-middle.grocer-gating.subscribe-block {
    background-color: #E40613;
    color: #FFFFFF;
    padding: 30px 0;
    position: relative;
    text-align: left;
}

.subs-middle.grocer-gating.subscribe-block ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.subs-middle.grocer-gating.subscribe-block ul li {
    display: inline-block;
}

.subs-middle.grocer-gating.subscribe-block h2 {
    color: #FFFFFF;
    font-family: ff-unit-slab-web, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 30px;
    padding: 0 0 0 0;
}

.subs-middle.grocer-gating.subscribe-block img.logo {
    position:absolute;
    bottom: 20px;
    right: 20px;
}

.subs-middle.grocer-gating.subscribe-block a.cta-button {
    background: #FFFFFF;
    border-radius: 6px;
    color: #E40613;        
    display: inline-block;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;       
    padding: 16px 20px 14px 20px;
    margin: 0 0 0 40px;
    text-transform: uppercase;
    text-decoration: none;
}

.subs-middle.grocer-gating.subscribe-block a.cta-button:hover {
    text-decoration: underline;
}


@media only screen and (max-width: 1100px) {
    .subs-middle.grocer-gating.subscribe-block h2 {
        font-size: 25px;
    }        
}

@media only screen and (max-width: 930px) {

    .subs-middle.grocer-gating.subscribe-block h2 {
        font-size: 30px;
        padding: 0 20px 20px 20px;
    }        

    .subs-middle.grocer-gating.subscribe-block ul {
        display: block;
        margin: 0 0 20px 0;
    }

    .subs-middle.grocer-gating.subscribe-block ul li {
        display: block;
    }

    .subs-middle.grocer-gating.subscribe-block a.cta-button {
        margin: 0 0 0 0;
    }

    .subs-middle.grocer-gating.subscribe-block img.logo {
        position: relative;
        bottom: auto;
        margin-left: calc(50% - 50px);
        right: auto;            
    }

}


/*
    SUBSCRIBE RED UPPER
*/

.subs-upper.grocer-gating {
    margin:  0 0 40px 0;
    padding: 0 0 0 0;
}

.subs-upper.grocer-gating h2, .subs-upper.grocer-gating p, .subs-upper.grocer-gating ul, .subs-upper.grocer-gating ul li, .subs-upper.grocer-gating a {
    color: #FFFFFF;
    font-family: "ff-unit-web-pro", sans-serif;
    line-height: normal;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.subs-upper.grocer-gating.subscribe-block {
    background-color: #E40613;
    color: #FFFFFF;
    padding: 30px 0;
    position: relative;
    text-align: left;
}

.subs-upper.grocer-gating.subscribe-block ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.subs-upper.grocer-gating.subscribe-block ul li {
    display: inline-block;
}

.subs-upper.grocer-gating.subscribe-block h2 {
    color: #FFFFFF;
    font-family: ff-unit-slab-web, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 30px;
    padding: 0 0 0 0;
}

.subs-upper.grocer-gating.subscribe-block img.logo {
    position:absolute;
    bottom: 20px;
    right: 20px;
}

.subs-upper.grocer-gating.subscribe-block a.cta-button {
    background: #FFFFFF;
    border-radius: 6px;
    color: #E40613;        
    display: inline-block;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;       
    padding: 16px 20px 14px 20px;
    margin: 0 0 0 40px;
    text-transform: uppercase;
    text-decoration: none;
}

.subs-upper.grocer-gating.subscribe-block a.cta-button:hover {
    text-decoration: underline;
}


@media only screen and (max-width: 1100px) {
    .subs-upper.grocer-gating.subscribe-block h2 {
        font-size: 25px;
    }        
}

@media only screen and (max-width: 930px) {

    .subs-upper.grocer-gating.subscribe-block h2 {
        font-size: 30px;
        padding: 0 20px 20px 20px;
    }        

    .subs-upper.grocer-gating.subscribe-block ul {
        display: block;
        margin: 0 0 20px 0;
    }

    .subs-upper.grocer-gating.subscribe-block ul li {
        display: block;
    }

    .subs-upper.grocer-gating.subscribe-block a.cta-button {
        margin: 0 0 0 0;
    }

    .subs-upper.grocer-gating.subscribe-block img.logo {
        position: relative;
        bottom: auto;
        margin-left: calc(50% - 50px);
        right: auto;            
    }

}

/*
    SUBSCRIBE BOTTOM WITH IMAGE
*/

.subs-bottom.grocer-gating {
    margin:  0 0 40px 0;
    padding: 0 0 0 0;
}

.subs-bottom.grocer-gating h2, .subs-bottom.grocer-gating p, .subs-bottom.grocer-gating ul, .subs-bottom.grocer-gating ul li, .subs-bottom.grocer-gating a {
    color: #FFFFFF;
    font-family: "ff-unit-web-pro", sans-serif;
    line-height: normal;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.subs-bottom.grocer-gating.subscribe-block {
    background-color: rgb(0,0,0);
    background:  url("/pictures/web/h/s/t/subscribectabottomimg_133566.jpg") 80% 5% no-repeat, #000000;
    border: 5px solid #E40613;
    color: #FFFFFF;
    text-align: left;
    position: relative;
}

.subs-bottom.grocer-gating.subscribe-block {
    padding-bottom: 60px;
}

.subs-bottom.grocer-gating.subscribe-block h2 {
    color: #FFFFFF;
    font-family: ff-unit-slab-web, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 55px;
    padding: 130px 0 22px 40px;
}

.subs-bottom.grocer-gating.subscribe-block h2 + p {
    color: #DCDCDC;
    font-size: 24px;
    padding: 0 0 55px 40px;
}

.subs-bottom.grocer-gating.subscribe-block img.logo {
    position:absolute;
    bottom: 20px;
    right: 20px;
}

.subs-bottom.grocer-gating.subscribe-block img.logo.mobile-yes {
    display: none;
}

.subs-bottom.grocer-gating.subscribe-block a.cta-button {
    background: #E40613;
    border-radius: 6px;
    color: #FFFFFF;        
    display: inline-block;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;       
    padding: 16px 20px 14px 20px;
    margin: 0 0 0 40px;
    text-transform: uppercase;
    text-decoration: none;
}

.subs-bottom.grocer-gating.subscribe-block a.cta-button:hover {
    text-decoration: underline;
}

@media (min-width: 850px) and (max-width: 950px) {
     .subs-bottom.grocer-gating.subscribe-block {
        background:  url("/pictures/web/h/s/t/subscribectabottomimg_133566.jpg") 120% 5% no-repeat, #000000;
    }   
}

@media (min-width: 750px) and (max-width: 849px) {
     .subs-bottom.grocer-gating.subscribe-block {
        background:  url("/pictures/web/h/s/t/subscribectabottomimg_133566.jpg") 180% 5% no-repeat, #000000;
    }   
}    

@media only screen and (max-width: 801px) {

    .subs-bottom.grocer-gating.subscribe-block {
        background: linear-gradient(97deg, rgba(0,0,0,1) 0%, rgba(44,44,44,1) 100%);
        padding: 50px 0 30px 0;
        text-align: center;
    }

    .subs-bottom.grocer-gating.subscribe-block h2 {
        font-size: 35px;
        padding: 0 0 15px 0;
    }

    .subs-bottom.grocer-gating.subscribe-block h2 + p {
        font-size: 18px;
        line-height: 25px;
        margin: 0 0 0 0;
        padding: 0 0 35px 0;
    }

    .subs-bottom.grocer-gating.subscribe-block a.cta-button {
        margin-left: 0;
        margin-bottom: 20px;
    }

    .subs-bottom.grocer-gating.subscribe-block img.logo {
        display: block;
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 0;
        margin-left: calc(50% - 50px);
    }        

    .subs-bottom.grocer-gating.subscribe-block img.logo.mobile-no {
        display: none;
    }

    .subs-bottom.grocer-gating.subscribe-block img.logo.mobile-yes {
        padding: 0 0 0 0;
        display: block;
    }        

}

/*

	NEW STYLING ADDED IN PREPARATIONS FOR THE £1 A WEEK OFFER
	
	08/01/2021
    
*/

/*

    Grocer Gating Styling
    
    thegrocer.co.uk
    
*/



/*
    SUBS OFFER GENERIC - TOP/MIDDLE
*/

.subs-offer-generic.grocer-gating {
    border: 5px solid #C5003E;
    margin:  0 0 40px 0;
    padding: 0 0 0 0;
}

.subs-offer-generic.grocer-gating h2, .subs-offer-generic.grocer-gating p, .subs-offer-generic.grocer-gating ul, .subs-offer-generic.grocer-gating ul li, .subs-offer-generic.grocer-gating a {
    color: #FFFFFF;
    font-family: "ff-unit-web-pro", sans-serif;
    line-height: normal;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.subs-offer-generic.grocer-gating.subscribe-block {
    background-color: #000000;
    background-image: url(https://dmrqkbkq8el9i.cloudfront.net/Pictures/480xAny/P/web/a/n/x/thegroverbg_74122.png);
    background-repeat: no-repeat;
    background-position: bottom right; 
    background-size: contain;
    color: #FFFFFF;
    padding: 60px 0;
    position: relative;
    text-align: left;
}

.subs-offer-generic.grocer-gating.subscribe-block ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.subs-offer-generic.grocer-gating.subscribe-block ul li {
    display: inline-block;
}

.subs-offer-generic.grocer-gating.subscribe-block h2 {
    color: #FFFFFF;
    font-family: ff-unit-slab-web, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 35px;
    line-height: 2.481rem;
    padding: 0 0 0 0;
}

.subs-offer-generic.grocer-gating.subscribe-block h2 span {
    color: #C5003E;
}

.subs-offer-generic.grocer-gating.subscribe-block img.logo {
    position:absolute;
    bottom: 20px;
    right: 20px;
}

.subs-offer-generic.grocer-gating.subscribe-block a.cta-button {
    background: #C5003E;
    border-radius: 6px;
    color: #FFFFFF;        
    display: inline-block;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;       
    padding: 16px 20px 14px 20px;
    margin: 0 0 0 80px;
    text-transform: uppercase;
    text-decoration: none;
}

.subs-offer-generic.grocer-gating.subscribe-block a.cta-button:hover {
    text-decoration: underline;
}


@media only screen and (max-width: 1100px) {
    .subs-offer-generic.grocer-gating.subscribe-block h2 {
        font-size: 25px;
    }        
}

@media only screen and (max-width: 930px) {

    .subs-offer-generic.grocer-gating.subscribe-block h2 {
        font-size: 30px;
        padding: 0 20px 20px 20px;
    }        

    .subs-offer-generic.grocer-gating.subscribe-block ul {
        display: block;
        margin: 0 0 20px 0;
    }

    .subs-offer-generic.grocer-gating.subscribe-block ul li {
        display: block;
    }

    .subs-offer-generic.grocer-gating.subscribe-block a.cta-button {
        margin: 0 0 0 0;
    }

    .subs-offer-generic.grocer-gating.subscribe-block img.logo {
        position: relative;
        bottom: auto;
        margin-left: calc(50% - 50px);
        right: auto;            
    }

}


/*
    SUBS OFFER BOTTOM
*/

.subs-offer-bottom.grocer-gating {
    border: 5px solid #C5003E;
    margin:  0 0 40px 0;
    padding: 0 0 0 0;
}

.subs-offer-bottom.grocer-gating h2, .subs-offer-bottom.grocer-gating p, .subs-offer-bottom.grocer-gating ul, .subs-offer-bottom.grocer-gating ul li, .subs-offer-bottom.grocer-gating a {
    color: #FFFFFF;
    font-family: "ff-unit-web-pro", sans-serif;
    line-height: normal;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.subs-offer-bottom.grocer-gating.subscribe-block {
    background: #000000;
    background-image: url(https://dmrqkbkq8el9i.cloudfront.net/Pictures/480xAny/P/web/a/n/x/thegroverbg_74122.png);
    background-repeat: no-repeat;
    background-position: bottom right; 
    background-size: contain;
    color: #FFFFFF;
    text-align: center;
    position: relative;
}

.subs-offer-bottom.grocer-gating.subscribe-block {
    padding-bottom: 40px;
}

.subs-offer-bottom.grocer-gating.subscribe-block p.article-limit {
    border-bottom: 1px solid #C5003E;
    display: inline-block;
    font-size: 20px;
    font-weight: 300;
    padding: 40px 0 15px 0;
    text-transform: uppercase;
}

.subs-offer-bottom.grocer-gating.subscribe-block h2 {
    color: #FFFFFF;
    font-family: ff-unit-slab-web, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    letter-spacing: -0.015em;
    padding: 25px 0 15px 0;
}

.subs-offer-bottom.grocer-gating.subscribe-block h2 span {
    color: #C5003E;
}

.subs-offer-bottom.grocer-gating.subscribe-block ul {
    display: block;
    padding: 0 0 20px 0;
}

.subs-offer-bottom.grocer-gating.subscribe-block ul li {
    background-image: url(/pictures/web/h/s/t/redtick_378742.png);
    background-position: left center;
    background-repeat: no-repeat;
    color: #DCDCDC;
    display: inline-block;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    letter-spacing: -0.012em;
    margin: 0 0 0 0;
    padding: 5px 30px 3px 35px;
}

.subs-offer-bottom.grocer-gating.subscribe-block ul li img {

}

.subs-offer-bottom.grocer-gating.subscribe-block ul li:last-of-type {
    padding-right: 0;
}

.subs-offer-bottom.grocer-gating.subscribe-block img.logo {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.subs-offer-bottom.grocer-gating.subscribe-block a.cta-button {
    background: #C5003E;
    border-radius: 6px;
    color: #FFFFFF;        
    display: inline-block;
    font-family: "ff-unit-web-pro", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;       
    padding: 16px 20px 14px 20px;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 25px;
}

.subs-offer-bottom.grocer-gating.subscribe-block a.cta-button:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 760px) {

    .subs-offer-bottom.grocer-gating.subscribe-block p.article-limit {
        font-size: 15px;
        padding: 30px 0 15px 0;
    }        

    .subs-offer-bottom.grocer-gating.subscribe-block h2 {
        font-size: 35px;
        padding: 20px 20px 20px 20px;
    }

    .subs-offer-bottom.grocer-gating.subscribe-block ul {
        padding-bottom: 8px;
        margin-left: 0;
    }        

    .subs-offer-bottom.grocer-gating.subscribe-block ul li {
        background-image: none;
        padding: 5px 0 3px 0;
        width: 100%;
    }

    .subs-offer-bottom.grocer-gating.subscribe-block ul li:first-of-type {
        background-image: url(/pictures/web/h/s/t/redtick2x_939335.png);
        background-position: top center;
        background-size: 40px 40px;
        padding-top: 56px;
    }

    .subs-offer-bottom.grocer-gating.subscribe-block a.cta-button {
        margin-bottom: 20px;
    }

    .subs-offer-bottom.grocer-gating.subscribe-block img.logo {
        display: block;
        position: relative;
        bottom: auto;
        right: auto;
        margin-left: calc(50% - 50px);
    }        

}