/* Rewards Landing Page */

#top-hero {
    min-height: auto;
}

#top-hero p span.font-size-3em {
    font-size: 88px;
    line-height: 1;
}

#top-hero .aem-hero__paragraph.md\:d-none {
    padding: 0 1rem;
}

#top-hero .aem-hero__foreground-image>img {
    max-height: 70px;
}

#rewards-cards-container {
    display: flex;
    flex-direction: column;
    max-width: 750px;
    margin: 0 auto;
}

#rewards-cards-container .card {
    max-width: none;
    height: 250px;
    margin-top: 95px;
    text-align: center;
}

#rewards-cards-container .card:nth-child(2) {
    margin-top: 60px;
}

#rewards-cards-container .card img {
    max-width: 212px;
}

#rewards-cards-container .aem-card__copy {
    padding-top: 0;
    margin-top: -1rem;
    background-color: #fff;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

#rewards-cards-container .aem-card__paragraph p {
    margin: 0;
    line-height: 21px;
}

#rewards-cards-container .aem-card__paragraph span.font-gotham-black {
    line-height: 32px;
}

#svg-dotted-line,
#svg-dotted-line-desktop {
    position: absolute;
    z-index: 0;
}

#svg-dotted-line {
    left: calc(50% - 115px);
}

#svg-dotted-line-desktop {
    left: calc(50% - 100px);
}

#svg-dotted-line-straight {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: -1rem;
}

.container.bg-grey-light {
    position: relative;
    z-index: 1;
}

#grey-dots-desktop,
#grey-dots-mobile {
    position: absolute;
    width: 100%;
    z-index: -1;
}

#grey-dots-desktop,
#grey-dots-mobile img {
    max-width: 100%;
}

#ok-to-be-extra {
    position: relative;
    overflow: hidden;
}

#ok-to-be-extra>.text {
    position: relative;
}

#ok-to-be-extra .cmp-text .font-size-72 {
    font-size: 32px;
}

#ok-to-be-extra .cmp-text p {
    margin: 0 0 4px;
    background-color: #f7f7f7;
}

#badge-carousel {
    overflow: hidden;
    margin: 0 auto;
    padding: 0 2rem;
    z-index: 1;
}

#badge-carousel>.image {
    min-width: 125px;
    max-width: 185px;
    display: flex;
    align-items: center;
}

#badge-carousel>*>.cmp-image {
    width: 100%;
    height: 100%;
    align-content: center;
}

#badge-carousel .cmp-image__image {
    max-width: none;
}

#badge-text {
    margin: 25px 30px 0;
    max-width: 683px;
    line-height: 21px;
}

#ok-to-be-extra-svg {
    width: 270px;
    height: 56px;
    margin-bottom: 32px;
}

.autoscroll>#badge-carousel {
    padding: 0;

    >.image {
        opacity: 1;
        min-width: 154px;
        height: 168px;
        animation: autoscrollContainer 50s linear infinite;
        animation-play-state: paused;
    }
}

@keyframes autoscrollContainer {
    100% {
        transform: translateX(calc(-1 * var(--scrollDistance)));
    }
}

#aem-xf-rewards-flip-tiles .aem-flip-tile {
    margin: -10px 0 0;
}

#aem-xf-rewards-flip-tiles .aem-flip-tile__title {
    padding: 0 0.5rem;
}

#aem-xf-rewards-flip-tiles .flip-tile:nth-child(odd) .aem-flip-tile {
    margin-left: auto;
}

#aem-xf-rewards-flip-tiles .flip-tile:nth-child(even) .aem-flip-tile {
    margin-right: auto;
}

#aem-xf-rewards-flip-tiles .aem-flip-tile__front {
    background-color: #f7f7f7;
}

#aem-xf-rewards-flip-tiles .aem-flip-tile {
    max-width: none;
    width: 185px;
}

#aem-xf-rewards-flip-tiles .aem-flip-tile__front,
#aem-xf-rewards-flip-tiles .aem-flip-tile__flipped {
    max-width: none;
    width: 165px;
}

#aem-xf-rewards-flip-tiles .aem-flip-tile__flipped {
    width: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#container-qr-hero {
    position: relative;
}

#dancing-veggies {
    position: absolute;
    bottom: 51.5vw;
    right: 31.4vw;
    width: 37.2vw;
}

#hero-qr-code {
    min-height: 340px;
}

#hero-qr-code .aem-hero__image-1 {
    display: none;
}

#hero-qr-code .aem-hero__image-1 img.d-inline.md\:d-none {
    display: block;
    position: absolute;
    bottom: 0;
    right: 1vw;
    width: 34vw;
    max-width: 390px;
    height: auto;
}

#aem-rewards-landing-page .bg-grey-light {
    background-color: #f7f7f7;
}

#qr-code-mobile {
    display: contents;
}

#qr-code-mobile>img {
    width: 100vw;
    max-width: none;
}

#dancing-veggies>img {
    max-width: none;
}

#bottom-hero .aem-hero__foreground-image {
    width: 82px;
    height: 80px;
    margin-bottom: 1.25rem;
}

#top-hero .aem-hero__button,
#bottom-hero .aem-hero__button {
    border-radius: 999px;
    width: 193px;
    height: 44px;
    line-height: 44px;
    z-index: 1;
}

a.popup-hyperlink:hover {
    cursor: pointer;
}

/* Tablet and desktop */
@media screen and (min-width: 768px) {
    #top-hero .aem-hero__foreground-image>img {
        max-height: 100px;
    }

    #svg-dotted-line-straight {
        display: none;
    }

    #rewards-cards-container .card:nth-child(odd) {
        align-self: end;
    }

    #rewards-cards-container .card:nth-child(2) {
        margin-top: 22px;
    }

    #rewards-cards-container {
        margin: -2rem auto;
        padding: 9vh 0;
        overflow: hidden;
        position: relative;
        z-index: 0;
    }

    #rewards-cards-container .card {
        max-width: 300px;
        height: 210px;
        margin-top: 0;

    }

    #rewards-cards-container .card img {
        max-width: 300px;
    }

    #rewards-cards-container .card:nth-child(4) {
        margin-top: 100px;
    }

    #svg-dotted-line-desktop {
        display: flex;
        flex-direction: column;
    }

    #svg-dotted-line-desktop svg {
        position: relative;
    }

    #ok-to-be-extra .cmp-text .font-size-72 {
        font-size: 70px;
    }

    #badge-carousel>.image {
        margin: 0 0.5rem;
    }

    .autoscroll>#badge-carousel>.image {
        min-width: 239px;
        height: 258px;
    }

    #badge-text {
        margin: 25px auto 60px;
        max-width: 683px;
        font-size: 1.25rem;
        line-height: 27px;
    }

    #ok-to-be-extra-svg {
        width: 590px;
        height: 121px;
        margin-bottom: 22px;
    }

    #flip-tile-container>.text {
        font-size: 1.5rem;
    }

    #flip-tile-container>.text .font-size-32 {
        font-size: 4rem;
    }

    #flip-tile-container>.text img {
        width: 100px;
        height: 133px;
    }

    #aem-xf-rewards-flip-tiles .aem-flip-tile__front,
    #aem-xf-rewards-flip-tiles .aem-flip-tile__flipped {
        width: 310px;
    }

    #aem-xf-rewards-flip-tiles .aem-flip-tile {
        width: 330px;
        padding: 20px 10px 10px;
    }

    #aem-xf-rewards-flip-tiles .aem-flip-tile__active .aem-flip-tile__flipped,
    #aem-xf-rewards-flip-tiles .aem-flip-tile__hover:hover .aem-flip-tile__flipped {
        top: 20px;
    }

    #hero-qr-code {
        height: 525px;
    }

    #hero-qr-code .aem-hero__foreground {
        height: 100%;
    }

    #hero-qr-code .aem-hero__copy {
        width: 50%;
        margin: 0;
    }

    #hero-qr-code .aem-hero__paragraph {
        margin: 0 15%;
    }

    #hero-qr-code .aem-hero__paragraph .font-size-48 {
        font-size: 52px;
    }


    #hero-qr-code .aem-hero__image-1 {
        display: block;
        width: 50%;
    }

    #hero-qr-code .aem-hero__image-1 img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    #hero-qr-code .aem-hero__copy p img {
        height: 35px;
        width: 119px;
        margin: 20px 15px 0 0;
    }

    #qr-code-mobile {
        display: none;
    }

    #container-qr-hero {
        position: relative;
    }

    #dancing-veggies {
        position: absolute;
        bottom: min(17.2vw, 195px);
        right: min(11.9vw, 140px);
        width: min(12vw, 140px);
        height: auto;
    }

    #bottom-hero {
        height: 786px;
    }

    #bottom-hero .aem-hero__paragraph .font-size-72 {
        font-size: 70px;
    }

    #bottom-hero .aem-hero__button {
        width: auto;
        width: 193px;
        font-size: 14px;

    }

}

@media screen and (min-width: 1024px) {
    #hero-qr-code {
        height: 675px;
    }

    #hero-qr-code .aem-hero__image-1 {
        width: 60%;
    }

    #hero-qr-code .aem-hero__copy {
        width: 40%;
    }

    #flip-tile-container>.text .font-size-32 {
        font-size: 88px;
    }

    #aem-xf-rewards-flip-tiles .col-2>div>* {
        flex: 0 1 auto;
    }

    #aem-xf-rewards-flip-tiles .aem-flip-tile {
        width: 360px;
        padding: 32px 25px 25px;
    }

    #aem-xf-rewards-flip-tiles .aem-flip-tile__flipped {
        width: calc(100% - 50px);
    }

    #aem-xf-rewards-flip-tiles .aem-flip-tile__active .aem-flip-tile__flipped,
    #aem-xf-rewards-flip-tiles .aem-flip-tile__hover:hover .aem-flip-tile__flipped {
        top: 32px;
    }
}

@media screen and (min-width: 1024px) {
    #aem-xf-rewards-flip-tiles .flip-tile:nth-child(odd) .aem-flip-tile {
        margin-left: 0;
    }
}

/* Mobile only */
@media screen and (max-width: 767.9px) {
    #rewards-cards-container .card .font-size-2em {
        font-size: 18px;
    }

    #text-have-questions {
        margin: 0 auto;
        max-width: 350px;
    }

    #text-have-questions .font-size-32 {
        font-size: 21px;
    }

    #text-have-questions .font-size-20 {
        font-size: 16px;
    }
}

/* XS Mobile only */
@media screen and (max-width: 400px) {
    .bag-icon-container {
        margin-left: 0;
    }

    .findChipotle-text {
        font-size: 13px;
    }

    #flip-tile-container>.text .font-size-32 {
        font-size: 1.5rem;
    }

    #aem-xf-rewards-flip-tiles .aem-flip-tile {
        width: auto;
        max-width: 175px;
        padding: 20px 5px 10px;
    }

    #aem-xf-rewards-flip-tiles .aem-flip-tile__front {
        width: auto;
        max-width: 165px;
    }

    #aem-xf-rewards-flip-tiles .aem-flip-tile__flipped {
        width: calc(100% - 10px);
        max-width: 165px;
    }
}

/* Dotted line animation https://css-tricks.com/svg-line-animation-works */
svg.fade-out {
    opacity: 1;
}

path.animation-dashoffset {
    opacity: 1;
    stroke-dashoffset: 0;
}

path.animation-dashoffset-mobile {
    opacity: 1;
}

svg.fade-in path.animation-dashoffset.animate {
    animation: dash 1s ease-out reverse forwards;
    stroke-dashoffset: revert-layer;
}

svg.fade-in path.animation-dashoffset.backwards.animate {
    stroke-dashoffset: var(--dashLen);
}

#svg-dotted-line svg.fade-in path.animation-dashoffset-mobile.animate {
    animation: dash-mobile 8s ease-out reverse backwards;
    z-index: 1;
    stroke-dashoffset: 2150;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes dash-mobile {
    to {
        stroke-dashoffset: 4300;
    }
}

@media screen and (min-width: 768px) {
    #rewards-cards-container .aem-card .fade-in {
        opacity: 0;
    }

    #rewards-cards-container .aem-card.animate .fade-in {
        opacity: 1;
    }
}

#svg-dotted-line-straight svg.fade-out {
    opacity: 1;
}

#svg-dotted-line-straight svg.fade-in path.animation-dashoffset-mobile.animate {
    animation: dash-mobile-straight 0.5s linear reverse backwards;
    z-index: 1;
    stroke-dashoffset: 140;
}

@keyframes dash-mobile-straight {
    to {
        stroke-dashoffset: 280;
    }
}

#aem-loyalty-banner.cmp-container { border-top: none; flex-direction: column;  padding-top: 40px; padding-bottom: 25px; }

#rewards-banner-button { width: 134px; height: 40px; letter-spacing: 1px; padding-top: 7px; }
#rewards-banner-button .cmp-button__text { position: relative; bottom: 2px; }

@media screen and (min-width: 768px) { 
    #aem-loyalty-banner.cmp-container { flex-direction: row; padding: 25px; }
}

#aem-loyalty-banner.cmp-container { border-top: none; flex-direction: column;  padding-top: 40px; padding-bottom: 25px; }

#rewards-banner-button { width: 134px; height: 40px; letter-spacing: 1px; padding-top: 7px; }
#rewards-banner-button .cmp-button__text { position: relative; bottom: 2px; }

@media screen and (min-width: 768px) { 
    #aem-loyalty-banner.cmp-container { flex-direction: row; padding: 25px; }
}