@import url("https://use.typekit.net/noq1wya.css");

/* fonts  */
/* Korolev Condensed Bold */
.korolevBold {
    font-family: "korolev-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 5.3vw;
}

/* Korolev Condensed Heavy */
.korolevHeavy {
    font-family: "korolev-condensed", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.textLarge {
    font-size: 8.5vw;
}

/* Lato Regular */
.latoRegular {
    font-family: "lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* lato Bold */
.latoBold {
    font-family: "lato", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.2;
}

/* Barlow Regular */
.barlowRegular {
    font-family: "barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 0 8px;
}

/* Barlow Condensed Light */
.barlowCondensedLight {
    font-family: barlow-condensed, sans-serif;
    font-weight: 300;
    font-style: normal;

    line-height: 0.95
}

.textXS {
    font-size: min(3vw, 12px);

}

.textshortTerms {
    font-size: min(4vw, 13px);

}


* {
    box-sizing: border-box;
    margin: 0;
}

html,
body {
    height: 100%;
}

body {
    background: #000;
    color: #fff;

    /* lato regular */
    font-family: "lato", sans-serif;
    font-weight: 400;
    font-style: normal;

    font-size: 4.4vw;

}

.darkGrayBG {
    background: #212121;
}

.darkYellowBG {
    background: #FAA81C;
    /* padding: 16px 0; */
}

.orange {
    background: #F58229;
}

.textBlack {
    color: #000;
}

.textC {
    text-align: center;

}

.tangoLogo {
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 100%;

}

.screenReaderText {
    position: absolute;
    user-select: none;
    color: transparent;
    overflow: hidden;
}

.tangoLogo.footerLogo {
    margin: 8px auto;
}

.tangoLogo i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/tango-logo.png) center no-repeat;
    width: 100%;
    padding-bottom: 100%;
    background-size: contain;
    display: block;
    margin: 3px auto;
}

.container {
    position: relative;
    padding: 0 16px;
}

.containerLPad {
    position: relative;
    padding: 0 48px;
}

.marMed {
    margin: 16px auto;
}


.pb {
    padding-bottom: 16px;
}

.pbsmallMed {
    padding-bottom: 24px;
}

.pt {
    padding-top: 16px;
}

.paddingTMed {
    padding-top: 32px;

}

.paddingBMed {
    padding-bottom: 32px;

}

.paddingTLarge {
    padding-top: 40px;
}

.paddingBLarge {
    /* padding-bottom: 32px; */
    padding-bottom: 40px;

}

.ptS {
    padding-top: 8px;
}

.pbS {
    padding-bottom: 8px;
}

.widthMed {
    max-width: 600px;
    margin: 0 auto;
}

.fontWeightOne {
    font-weight: 100;
}

.kHeavySubH {
    font-size: 6.9vw;
}

.deskFlex .flexLeft .winACashStashImg,
.deskFlex .flexRight {
    display: none;
}

.orangeLineMarginTop {
    margin-top: 0 !important;
}

.winACashStashImg,
.winACashStashImgMain {
    /* max-width: 600px; */
    margin: 0 auto;
}

.winACashStashImg i,
.winACashStashImgMain i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/winaCashStashMob.png) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 80%;
    display: block;
}

.tangoWithCash {
    position: relative;

    margin: 0 auto;
}

.tangoWithCash i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/tangoWithCash.jpg) left center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 78.2%;
    display: block;
}


.mWidth {
    max-width: 600px;
    margin: 0 auto;
}



.tangoCashImg {
    max-width: 600px;
    margin: 0 auto;

}

.tangoCashImg i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/CashMobileBg.jpg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 111%;
    display: block;
}




/* landing page */
.cashMobile {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.cashMobile i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/cashMobile.jpg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 146%;
    display: block;
}

.oranageBanner {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
}

.oranageBanner i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/orangeBanner.svg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 16.4%;
    display: block;
    position: absolute;
    top: 26%;
    overflow: hidden;
}

.oranageBannerText {
    margin-top: 17%;
    text-align: center;
    top: 10%;
    rotate: -7deg;
    font-size: 7vw;
}

.flexThreeImg {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: center;

    margin: 0 auto;
    max-width: 600px;

    font-size: 3.78vw;
    padding-right: 16px;
    line-height: 1.2;
}

.flexThreeImg p {
    width: 60vw;
    text-align: left;

}

.tangoCanImg+p,
.enterPhoneImg+p {
    /* margin-top: -32px; */
}

.cashSymbolImg+p {
    align-self: end;
}



.tangoCanImg,
.enterPhoneImg,
.cashSymbolImg {
    max-width: 150px;
    /* width: 40vw; */
    width: 35vw;
    padding: 16px;

}

.tangoCanImg i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/tangoCan.png) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 100%;
    display: block;
}


.enterPhoneImg i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/enterPhoneImg.png) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 100%;
    display: block;

}

.cashSymbolImg i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/cashSymbol.png) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 100%;
    display: block;
}

.flexCashSymbol {
    align-items: start;
}

.flexThreeImg .cashSymbolImg+p {
    margin-top: 48px;
}

/* Yellow section */
.rectangleblack {
    background: #000;
    border-radius: 10px;
    padding: 8px 16px 16px;
    margin: 8px auto;
    font-size: 3.7vw;
    line-height: 1.2;

}

.rectangleblack>p {
    margin: 0 auto;
    width: 73%;
}




.coinLanding {
    max-width: 600px;
    margin: 0 auto;
    width: 40vw;

}

.coinLanding i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/coinLanding.png) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 88%;
    display: block;

}

.coinWinOne {
    width: 55vw;
}

.coinWinFive i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/coinFive.png) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 88%;
    display: block;

}

.ticketBlank i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/ticket.svg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 50%;
    display: block;

}

.ticketLanding {
    max-width: 600px;
    margin: 0 auto;
    width: 52vw;
    margin-bottom: 4px;

}

.ticketLanding i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/ticketLanding.png) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 57%;
    display: block;
}

.yellowSectionFont {
    font-size: 3.7vw;
    line-height: 1.2;
    margin: 0 auto;
    width: 73%
}

.mainButton {
    /* padding: 12px; */
    padding: 10px;
    /* margin: 32px 48px; */
    border-radius: 40px;
    /* font-size: 4.2vw; */
    display: block;
    color: #000;
    text-decoration: none;
}

.mainButton.enterButtonMargin {
    /* margin: 32px 48px; */
    margin: 48px 48px 40px;
}

.flexLeft>div .mainButton.enterButtonMargin,
.headerTitleMargin {
    margin: 32px 48px;

}

/* .mainButton.marginL {
    margin: 32px 48px;

} */



/* .mainButton a {
    color: #000;
    text-decoration: none;
} */

/* retailer */

.whiteBlock {
    background: #fff;
    height: 100%;
    max-height: 77px;
    width: 100%;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px auto;
    max-width: 600px;
}

.tescoLogo,
.sainsburyLogo,
.asdaLogo,
.icelandLogo,
.morrisonsLogo,
.waitroseLogo,
.amazonLogo,
.ocadoLogo {
    width: 40%;
    height: 100%;
    padding: 0 16px;
}

.tescoLogo i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/tesco.svg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: min(102px, 50%);
    display: block;
}

.sainsburyLogo {
    width: 45%;
    height: 100%;
    padding: 0 16px;
}

.sainsburyLogo i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/sainsbury.svg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: min(40px, 50%);
    display: block;
}


.asdaLogo i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/asda.svg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: min(55px, 50%);
    display: block;
}

.icelandLogo i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/icelandFood.jpg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: min(45px, 50%);
    display: block;
}


.morrisonsLogo i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/morrisons.svg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: min(80px, 50%);
    display: block;
}



.waitroseLogo i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/WaitroseLogo.jpg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: min(45px, 50%);
    display: block;
}



.amazonLogo i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/amazonLogo.svg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: min(60px, 50%);
    display: block;
}

/* .ocadoLogo {
    width: 50%;
    height: 100%;
    padding: 0 16px;
} */

.ocadoLogo i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/ocadoLogo.jpg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: min(45px, 50%);
    display: block;
}


.buyButton {
    padding: 10px 16vw;
    margin: 32px 16px;
    border-radius: 40px;
    font-size: 5vw;
    display: flex;
    width: 25vw;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.buyButton span {
    display: flex;
    align-items: center;
    color: #000;
    text-decoration: none;
}

.whiteBlock>a {
    text-decoration: none;
}

.buyButton i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/buyLinkOut.svg) center no-repeat;
    background-size: contain;
    width: 5vw;
    padding-bottom: 33%;
    display: block;
    margin: 0 8px;

}

/* game */



/* socials  */
.flexSocial {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 8px auto;
    align-items: center;
}

.flexSocial a {
    color: #fff;
    text-decoration: none;
}

.insta,
.tictok {
    max-width: 27px;
    width: 100%;
    margin: 0 8px;
}

.insta i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/Insta.svg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 100%;
    display: block;

}

.tictok i {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/Tiktok.svg) center no-repeat;
    background-size: contain;
    width: 100%;
    padding-bottom: 100%;
    display: block;

}

.faqs-container {
    max-width: 600px;
    margin: 0 auto;
}


.mat-expansion-panel {
    background: #000000;
    color: #fff;
    border-bottom: 1px #F58229 solid;
    margin: 0 16px !important;
}

.mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover {
    background: #000;
}

.mat-expansion-panel-header {
    padding: 0 16px 0 0 !important;

}

.mat-expansion-indicator::after {
    color: #F58229;
}

/* footer */

.orangeLine {
    height: 1px;
    width: 100%;
}

.flexColumn {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flexColumn a {
    padding: 8px 0;
    text-decoration: none;
}

.orangeLineMarginTop {
    margin: unset;
}

.marginTNone {
    margin-top: 0;
}

footer .footer-top-text {
    max-width: unset !important;
}

/* nav */

nav.open {
    width: 100% !important;
}

nav {
    max-width: unset !important;
    height: auto !important;
    min-height: 100%;
}

.controls-shadow {
    background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/navOpenImg.png) center no-repeat;
    width: 62%;
    padding-bottom: 68%;
    background-size: contain;
    display: none !important;
    margin: 40px auto;
}

.links {
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    display: none !important;
}

nav.open>.links,
nav.open>.controls-shadow {
    display: block !important;
}

nav a {
    font-family: "korolev-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 7vw !important;

    text-align: center;
}

.spacer {
    display: none;
}

.links a>.mat-icon {
    display: none !important;
}

.mainButton,
button,
.buyButton {

    transition: transform 0.2s ease,
}

.mainButton:hover,
button:hover,
.buyButton:hover {
    transform: scale(1.03);
}





@media only screen and (min-width:600px) {
    body {
        font-size: 16px;
    }

    .controls-shadow {
        width: 400px;
        padding-bottom: 416px;

    }

    nav a {
        font-size: 40px !important;
    }

    .textLarge {
        font-size: 32px;
    }

    .deskHide {
        display: none;
    }

    .flexThreeImg,
    .rectangleblack {
        font-size: 14px;
    }

    .winACashStashImg i {
        padding-bottom: 52%;
    }

    .winACashStashImgMain i {
        width: 500px;
        padding-bottom: 75%;
    }

    .korolevBold {
        font-size: 20px;
    }

    .textshortTerms {
        max-width: 500px;
        margin: 0 auto;
    }

    .kHeavySubH {
        font-size: 24px;
    }

    .headerSmallText {
        font-size: 18px;
    }


    .deskFlex {
        display: flex;
        max-width: 1600px;
        margin: 0 auto;
    }

    .deskFlex .flexLeft .winACashStashImg,
    .deskFlex .flexRight {
        display: block;
    }

    .deskFlex .cashMobile {
        display: none;
    }

    /* .mobileH {
        display: none;
    } */
    .paddingBMedDesk {
        padding-bottom: 32px;
    }

    .ptSDesk {
        padding-top: 8px;
    }

    .ptDesk {
        padding-top: 16px;
    }

    .paddingLBDesk {
        padding-bottom: 40px;

    }

    .paddingTMedDesk {
        padding-top: 32px;
    }


    .flexLeft {
        width: 44.44%;
    }

    .flexRight {
        width: 55.56%;
    }

    .widthSmallDesk {
        max-width: 400px;
        margin: 0 auto;

    }

    .footerDeskPaddingUnset {
        padding: unset;
    }

    .tangoWithCash i {
        background-size: cover;
        padding-bottom: 77.3%;
    }

    .oranageBanner i {
        background-size: contain;
        padding-bottom: 11%;
        top: 9.3%;
        left: 0;
    }

    .oranageBannerText {
        margin-top: 11%;
        font-size: min(3vw, 32px);
    }

    .mainButton.mainButton.enterButtonMargin,
    .headerTitleMargin,
    .flexLeft>div .mainButton.enterButtonMargin {
        margin: 40px auto 32px;
    }

    .mainButton {
        margin: 16px auto 32px;
        font-size: min(3vw, 16px);
        width: min(33vw, 290px);
    }

    .flexThreeImgDesk {
        display: flex;
        width: 100%;
        margin: 0 auto;
        max-width: 800px;
    }

    .flexRectangleBlackDesk {
        display: flex;
        width: 100%;
        margin: 0 auto;

        max-width: 1000px;

    }

    .rectangleblack {
        height: 275px;
        margin: 0 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }


    .coinLanding,
    .ticketLanding {
        max-width: 200px;
        /* height: 150px; */
    }


    .yellowSectionFont {
        font-size: 14px;
    }

    .ticketLanding {
        margin-bottom: 8px;

    }

    .coinWinFive i,
    .coinWinOne i {
        padding-bottom: 80%;
        margin: 0 auto;
    }

    .coinLanding i {
        padding-bottom: 60%;
    }

    .coinWinOne {
        max-width: 320px;
        /* height: 240px; */
    }

    .ticketBlank {
        max-width: 200px;
    }

    .flexThreeImg {
        display: flex;
        flex-direction: column;
        width: 34.5%;
        height: 100%;
        justify-content: center;
        align-content: center;
        align-items: center;
        padding-right: 0;
        padding: 0 8px;
    }

    .flexThreeImg p {
        text-align: center;
        width: 68%;
        margin: 0 auto;


    }

    .flexThreeImg .cashSymbolImg+p {
        margin-top: 0;
    }

    .flexColumn {
        flex-direction: row;
        justify-content: flex-end;
        align-items: flex-start;
    }

    .tangoCashImg i {
        background: url(https://cdn.promo-now.com/site-files/681ccda1e879384b74b26a38/tangoWithCash.jpg) left center no-repeat;

        margin: 0 auto;
        width: 500px;
        background-size: contain;
        height: 350px;
        padding-bottom: unset;

    }

    .tangoCanImg,
    .enterPhoneImg,
    .cashSymbolImg {
        max-width: 240px;
        width: 30vw;
        padding: 16px 0;
    }

    .tangoCanImg+p,
    .enterPhoneImg+p,
    .cashSymbolImg+p {
        margin-top: 0;
    }

    .flexColumn a {
        padding: 8px 16px;
        display: block;
    }

    .tangoLogo {
        width: 80px;
        /* margin: 0px 16px; */
    }

    .tangoLogo a {
        width: 90px;
        padding-top: 0;
    }


    .tangoLogo.footerLogo {
        margin: 0 16px;
    }

    .marMed {
        margin: 16px auto;
    }

    /* .flexColumn.barlowRegular {
    margin-top: -8px;
    } */


    .tescoLogo,
    .sainsburyLogo,
    .asdaLogo,
    .icelandLogo,
    .morrisonsLogo,
    .waitroseLogo,
    .amazonLogo,
    .ocadoLogo {
        padding: 0 32px;
        width: 50%;
    }

    .whiteBlock {
        max-height: 100px;
    }


    .buyButton {
        width: 130px;
        font-size: 18px;
        padding: 16px 0;
    }

    .tescoLogo i {
        width: 180px;
    }

    .sainsburyLogo i,
    .asdaLogo i,
    .icelandLogo i,
    .waitroseLogo i,
    .amazonLogo i,
    .ocadoLogo i {
        width: 182px;
    }

    .morrisonsLogo i {
        width: 152px;
    }


    .buyButton i {
        width: 25px;
    }


}



@media screen and (min-width:1600px) {
    .tangoWithCash i {
        padding-bottom: 72.3%;
    }

    .winACashStashImg i {
        padding-bottom: 65%;
    }

    /* .winACashStashImgMain i {
        padding-bottom: 75%;
    } */


    .oranageBanner i {
        padding-bottom: 9%;
        top: 12%;

    }

    .oranageBannerText {
        margin-top: 9%;
    }


}

.tableContainer {
    overflow-x: auto !important;
}

table {
    margin: 10px 0;
    border: 1px solid #ccc;
    border-collapse: collapse
}

table td,
table th {
    padding: 5px 10px;
    border: 1px solid #ccc;
    text-align: left;
}

table th {
    font-weight: 700;
}